Отзывчивый Карусель с использованием Cycle2
Я работаю над каруселью, используя плагины Cycle2 и Cycle2.
Нашел решение здесь для отображения переменного количества элементов в зависимости от ширины окна с измененным размером.
Проблема заключается в разрыве карусели из-за другого слайд-шоу.
Все работает до тех пор, пока основное слайд-шоу не циклически переходит в первый слайд, а затем при изменении размера страницы в карусели отображается только один слайд.
демонстрация
JQuery
function buildCarousel(visibleSlides) {
$('.caro').cycle({
fx: 'carousel',
speed: 600,
slides: 'img',
carouselVisible: visibleSlides,
carouselFluid: true
});
}
function buildSlideshow() {
$('.home-slideshow').cycle({
fx: 'fade',
slides: 'img',
timeout: 12000
});
}
function initCycle() {
var width = $(document).width();
var visibleSlides = 5;
if ( width < 400 ) {visibleSlides = 1}
else if(width < 700) {visibleSlides = 3}
else {visibleSlides = 5};
buildSlideshow();
buildCarousel(visibleSlides);
}
function reinit_cycle() {
var width = $(window).width();
var destroyCarousel = $('.caro').cycle('destroy');
if ( width < 400 ) {destroyCarousel;reinitCycle(1);}
else if ( width > 400 && width < 700 ) {destroyCarousel; reinitCycle(3);}
else {destroyCarousel;reinitCycle(5);}
}
function reinitCycle(visibleSlides) {
buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
clearTimeout(reinitTimer);
reinitTimer = setTimeout(reinit_cycle, 100);
});
$(document).ready(function(){
initCycle();
});
HTML
<div class='main' style="max-width: 950px;margin: auto;">
<div class="home-slideshow" style="margin-bottom: 150px;">
<img style="width: 100%" src="http://placehold.it/950x250" alt="">
<img style="width: 100%" src="http://placehold.it/950x250" alt="">
</div>
<div class="caro" >
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/300x300" alt="">
</div>
</div>
2 ответа
По некоторым причинам, после первых переходов слайд-шоу, когда он воссоздает карусель, он устанавливает непрозрачность всех изображений равной 0.
Добавление $('.caro img').css('opacity','1');
после инициализации карусели это исправили, но я уверен, что есть лучшее решение для этого, но вам, возможно, придется покопаться в источнике плагина.
У вас есть следующая строка:
var destroyCarousel = $('.caro').cycle('destroy');
... который устанавливает destroyCarousel
к результату этого вызова метода (объект jQuery), вместо создания функции, которую вы можете вызвать для выполнения уничтожения.
Я думаю, это то, что вы хотели сделать:
function reinit_cycle() {
var width = $(window).width();
var destroyCarousel = function() { // create a function
$('.caro').cycle('destroy');
}
if (width < 400) {
destroyCarousel(); // call the function
reinitCycle(1);
} else if (width > 400 && width < 700) {
destroyCarousel();
reinitCycle(3);
} else {
destroyCarousel();
reinitCycle(5);
}
}