Jquery cycle2 carousel add slides
Attempting to create a jquery cycle2 carousel that loads additional slides into a "complete cycle" but the additional slides are not added correctly and the carousel does not continue.
JSFiddle example here My HTML:
<div id="instagramSlides">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
My Javascript:
$('#instagramSlides').cycle({
loop: 1,
fx: 'carousel',
carouselVisible: 4,
slides: 'div'
});
$('#instagramSlides').on('cycle-finished', function (event, opts) {
for (var i = 5; i < 10; i++) {
var content = ["<div class=\"item\"><h1>" + i + "</h1></div>"];
$('#instagramSlides').cycle('add', content);
}
});
Try 1:
var c_opt = {
loop: 0,
fx: 'carousel',
carouselVisible: 3,
slides: 'div.item'
};
$('#instagramSlides').cycle(c_opt);
$('#instagramSlides').on('cycle-after', function (event, opts) {
if (opts.nextSlide === 0) {
$(this).cycle('destroy');
$.ajax({
url: "/Home/Instagram20",
type: "POST",
data: { maxId: null },
dataType: "json",
success: function (data) {
var info = $.parseJSON(data);
for (var i = 5; i < 10; i++) {
var content = "<div class=\"item\"><img width=\"200\" height=\"200\" src=\"" + info['data'][i]['images']['thumbnail']['url'] + "\" /></div>";
$('#instagramSlides').append(content);
}
}
});
$(this).cycle(c_opt);
}
});
if i add them like:
$('.cycle-carousel-wrap').append(content);
only penalties are added, but they are not part of the slideshow
+3
source to share
2 answers
After struggling with this for the long haul, I decided to go back to my first attempt at owl carrousel and with a little help from my uncle google, I got it working.
Here is the soul at work:
$(document).ready(function () {
$("#owl-instagram").owlCarousel({
items: 5,
rewindSpeed: 500,
autoPlay: 2000,
stopOnHover: true,
lazyLoad: true,
//navigation: true,
//navigationText: ["<", ">"],
responsive: true,
autoWidth: true,
loop: true,
afterMove: moved
});
});
function moved() {
var owl = $("#owl-instagram").data('owlCarousel');
if (owl.currentItem + 5 === owl.itemsAmount) {
$.ajax({
url: "/Home/Instagram20",
type: "POST",
data: { maxId: $('#nextId').val() },
dataType: "json",
success: function (data) {
var info = $.parseJSON(data);
if (info['pagination']['next_max_tag_id'] < $('#nextId').val()) {
$('#nextId').val(info['pagination']['next_max_tag_id']);
addSlides(info);
}
}
});
}
}
function addSlides(data) {
console.log(data);
var owl = $("#owl-instagram");
var content = "";
for (var i = 0; i < data['data'].length; i++) {
content += "<div class=\"owl-item\" style=\"width: " + owl.data('owlCarousel').itemWidth + "px;\">" +
"<a href=\""+data['data'][i]['link']+"\" class=\"instagramSlideItem\" target=\blank\">" +
"<img class=\"img-responsive\"src=\"" + data['data'][i]['images']['standard_resolution']['url'] + "\" alt=\"\" />" +
"<img src=\"" + data['data'][i]['user']['profile_picture'] + "\" alt=\"\" style=\"width:60px; position:absolute; bottom:0px; right:5px; border:solid 1px #d41217\" />" +
"</a>" +
"</div>";
}
owl.find(".owl-wrapper").append(content);
//Copied and tweaked from setVars() in owl.carousel.js
var base = owl.data('owlCarousel');
base.$userItems = base.$elem.find('.owl-item');
base.itemsAmount = base.$userItems.length;
base.$owlItems = base.$elem.find(".owl-item");
base.$owlWrapper = base.$elem.find(".owl-wrapper");
base.onStartup();
}
0
source to share
try it
$('#instagramSlides').cycle({
loop:0,
fx: 'carousel',
carouselVisible: 3,
slides: 'div'
});
$('#instagramSlides').on('cycle-finished', function (event, opts) {
for (var i = 5; i < 10; i++) {
var content = ["<div class=\"item\"><h1>" + i + "</h1></div>"];
$('#instagramSlides').cycle('add', content);
}
});
0
source to share