Sto scrivendo una pagina in cui sono presenti 4 diapositive con un sacco di contenuti immagine. Per migliorare la velocità di caricamento, vogliamo caricare solo la prima diapositiva. Poi, dopo il suo caricamento, avremmo ottenuto il resto tramite chiamate Ajax e li avremmo aggiunti come diapositive.Flexslider Aggiungi diapositiva (contenuto Ajax)
Flexslider V2 ha una funzione .addSlide per questo, tuttavia continuo a ricevere l'errore slider.addSlide is not a function.
Qualsiasi aiuto sarebbe molto apprezzato. Grazie
Ecco il mio codice.
<!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]
La sua sembra che se si dispone di una sola diapositiva allora flexsider non accetta queste funzioni extra. Iniziando con due diapositive questa idea funziona bene. È molto probabile che si tratti di un errore o di una funzione prevista di flexslider.
allowOneSlide è una struttura in v2.2 +, vedere: github.com/woothemes/FlexSlider#allowoneslide-new –