Geek asks and answers

Flexslider Add Slide (Ajax Content)

I am writing a page on which there are 4 slides with a large number of images. To increase the loading speed, we want to load only the first slide. Then after downloading it, we get the rest through ajax calls and add them as slides.

Flexslider V2 has a .addSlide function for this, however I keep getting an error slider.addSlide is not a function.

Any help would be greatly appreciated. Thanks

Flexslider

Here is my code.

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="_slider/flexslider.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="_slider/jquery.flexslider-v2-min.js"></script>

<script type="text/javascript">
$(window).load(function() {
     $('.flexslider').flexslider({

        animation: "slide", 
        slideshow: false, 
        controlNav: false, 
        controlsContainer: ".flex_wrap", 
        start: function(slider){

            //Load another slide and append it to the html
            $.get('landing_page_step1.html', function(data) {
              $('.slides').append(data);
            });

            //Tell flexslider to add this as a slide
            slider.addSlide(".step1", 1);     
        }

      });
 });    
</script>

</head>

<body class="landing_page">

<div class="flex_wrap">
  <div class="flexslider grid_12">
    <ul class="slides">
      <li>
              Slide One
      </li>
    </ul>
 </div>
</div>

</body>
</html>

[Update]

It seems that if you have only one slide, flexsider does not accept these additional functions. Starting with two slides, this idea works fine. Most likely, this is a bug or the intended function of flexslider.

+5
source share
1 answer

, , , ( 882).

, , , .

+4

More articles:


All Articles