[Resolved] Trouble with Flex Slider

[Author]

Posts

[Charles]

Support,

I am trying to add a flexslider to my view template, but it keeps showing duplicate images and won't show the additional flexslider images field I created.

Here is a screenshot: hidden link

Here is my code for the Flexslider:

<!-- Slider - start here -->
<div id="flexslider" class="flexslider">
<img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
    <li>[wpv-post-featured-image class="fleximgs" size="original" ]</li>
    <li>[types class="fleximgs" field="flex-slider-images" separator=','][/types]</li>
  </ul>
</div>
<!-- Slider - end here -->

I am using testing this with the post "article test 3". You'll see the fleximages custom field if I grant access, which I'm willing to do.

Thanks,
Chuck

[Nigel]

Hi Chuck

You need to generate the markup required by Flex Slider using the wpv-for-each shortcode to loop across the image fields.

We are introducing a knowledge base section where we will share solutions for common tasks. It's not ready yet, but adding a flex slider is one of the topics that will be covered and you can find a draft of the document here which details the steps: hidden link

Take a look at that and if you have any problems come back to me here.

[Charles]

Got it. Glad to here there are tutorials in the works.

I was missing the JS and CSS files. Here's an updated screenshot: hidden link

I was able to get the slider to work, but it's showing a second preloader outside of the slider. Not sure why.

HTML

<!-- Slider - start here -->
<div id="flexslider" class="flexslider">
<img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
    <li>[wpv-post-featured-image class="fleximgs" size="original" ]</li>
    <li>[types class="fleximgs" field="flex-slider-images" separator=','][/types]</li>
  </ul>
</div>
<!-- Slider - end here -->

JS

jQuery(window).load(function() {
  jQuery('#flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    start: function() {
            jQuery('#flexslider').find('.loading').hide();
    }  
  });
});

Thanks,
Chuck

[Nigel]

Hi Chuck

As you can see in the screenshot, you are inserting a slider for every iteration of the loop, i.e. there will be as many sliders on the page as there are posts showing.

Is that what you intended? That each post has its own slider?

Because if you want that then each slider is getting added with an id="flexslider", and with HTML you cannot have more than one element with the same id on one page. Your code will fail when referencing #flexslider because it expects only one and there are multiple.

You would need to use classes for your jQuery selectors that return all the sliders then iterate over them, but I'm not sure you if you were intending to add multiple sliders.

[Charles]

Nigel,

Correct, I am trying to add a slider for each post. I added the slider at the bottom of the post to test, but have since replaced the main image with the slider in the loop.

Screenshot: hidden link

Can I not do this because because i can't have more than one Flexslider per page?

Thanks,
Chuck

[Charles]

Nigel,

For reference, here's what I'm trying to emulate: hidden link

You'll notice on the main page that some posts have sliders and some do not. I'm trying to create the same feature for my site.

Thanks,
Chuck

[Nigel]

Hi Chuck

You can have multiple sliders on the same page, but you need to change your markup where they are added and the JavasScript that initialises them.

As I mentioned above you add the flexslider inside a div with an id of "flexslider", which means each flexslider on the page will have the same id—which is invalid HTML—and means that your jQuery code to instantiate the slider each target the first #flexslider found on the page, because only one is expected.

Your wrapper div also already has a "flexslider" class, so you probably just need to change the line that initialises the flexslider to use the class rather than the id, like so:

jQuery('.flexslider').flexslider({

Note that you have a related issue with the start function that also uses the id as the selector, and I think you will need to modify that to get it to work.

[Charles]

Nigel,

I made changes per your advice and this markup seems to be working:

 <!-- Slider - start here -->
      <div class="flexslider">
        <img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
        <ul class="slides">
            <li>[wpv-post-featured-image class="fleximgs articleimage img-responsive" size="original" resize="proportional"]</li>
            <li>[types class="fleximgs" field="flex-slider-images" separator="</li><li>"][/types]</li>
        </ul>
      </div>
      <!-- Slider - end here -->

jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    start: function() {
            jQuery('.flexslider').find('.loading').hide();
    }  
  });
});

I'm going to mark this as resolved.

Thank you,
Chuck