Support » Plugin: Slide Anything - Responsive Content / HTML Slider and Carousel » Using list-tags instead of to enhance content recognition

  • Resolved AndreLung

    (@andrelung)


    I would love to use a list instead of the automatically generated <div> tags. Do you think is possible? I recall having seen that with the original owl-carousel.

    Being specific, I think the <div class="owl-stage">
    should become an <ul> and
    every <div class="owl-item">
    should become <li> -elements

    Reason behind: I am using the carousel on my job-postings and indeed.com seems to have problems parsing the divs. For them a visible list with a collection of single <li>-items would be better suited (and I think for many other use-cases, too).

    Last, but not least: This is a really great plugin! Thank you so much! I am using Slide Anything PRO @version 2.3.7

    • This topic was modified 1 year, 9 months ago by AndreLung.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author simonpedge

    (@simonpedge)

    I’ve never seen Owl Carousel built using Lists like you mention – there is certainly no mention of that within the OC2 documentation:
    https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

    Also the OC2 JavaScript now generates a load of intermediate DIVs for your provided slider content code – so if you have the following code:

    <div class="owl-carousel">
      <div> Your Content </div>
      <div> Your Content </div>
      <div> Your Content </div>
    </div>

    The following code is generated by OC2 and is then displayed as your HTML page output:

    <div class="owl-carousel">
    <div class="owl-stage-outer">
    <div class="owl-stage">
      <div class="owl-item">
        <div> Your Content </div>
      </div>
      <div class="owl-item">
        <div> Your Content </div>
      </div>
      <div class="owl-item">
        <div> Your Content </div>
      </div>
    </div>
    </div>
    </div>

    So there would end up being some DIVs in-between the container UL and LI…

    • This reply was modified 1 year, 9 months ago by simonpedge.
    Thread Starter AndreLung

    (@andrelung)

    Hi Simon,

    and thanks for your answer! I did a little research yesterday and it’s in the options: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#itemelement
    I haven’t been successful in applying that, but maybe you have an idea how to achieve this? You are very right with the intermediate DIVs, but since I need the following, I think it could work:

    <div class="owl-carousel">
    <div class="owl-stage-outer">
    <ul class="owl-stage">
      <li class="owl-item">
        <div> Your Content </div>
      </li>
      <li class="owl-item">
        <div> Your Content </div>
      </li>
      <li class="owl-item">
        <div> Your Content </div>
      </li>
    </ul>
    </div>
    </div>

    What do you think? Any idea on how to pass the options to the plugin?

    Thanks!

    Plugin Author simonpedge

    (@simonpedge)

    Ok, the 2 options “itemElement” & “stageElement” do look like they address this – I will have a look further into this to see if this could be incorporated without breaking anything…

    Plugin Author simonpedge

    (@simonpedge)

    Hi, please update Slide Anything to version 2.3.8 – I have just modified the plugin to add a new feature to address using UL/LI elements as containers.

    In the right-hand sidebar, under “Other Settings”, you will see the new option “Use UL and LI Containers” – check this checkbox.

    Thread Starter AndreLung

    (@andrelung)

    Works like a charm! Thanks for your support!

    With WordPress 5.2.3 and Chrome 76.0.3809.132 however, there is a little rendering issue with the little (i)s, which I haven’t noticed before: https://imgur.com/a/CJEDlU9

    • This reply was modified 1 year, 9 months ago by AndreLung. Reason: mark as solved
    Plugin Author simonpedge

    (@simonpedge)

    Hmmm, I’ve just upgraded WordPress and my Chrome browser to the same (latest) versions, and this is what I see on my EdgeWebPages.com website:
    https://i.imgur.com/lKLRnWt.png

    So I think this is probably a theme-related issue…
    (I use the DIVI theme on this site)

    Are you seeing any JavaScript errors within the WP Dashboard – press CTRL+SHIFT+J keys together in Chrome to view the JavaScript Console?

    Thread Starter AndreLung

    (@andrelung)

    Definitely looks different. But no error in the console.

    I am using the pitch-theme (https://pitch.select-themes.com), but I don’t think it changes anything in the backend. Maybe this is caused by some other plugins css? I noticed the kind of general class name “tooltip”.

    However, this no major problem for me. Just wanted to hint you, that this is occuring in my backend.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Using list-tags instead of to enhance content recognition’ is closed to new replies.