Отзывчивый Карусель с использованием Cycle2

Я работаю над каруселью, используя плагины Cycle2 и Cycle2.

Нашел решение здесь для отображения переменного количества элементов в зависимости от ширины окна с измененным размером.

Проблема заключается в разрыве карусели из-за другого слайд-шоу.

Все работает до тех пор, пока основное слайд-шоу не циклически переходит в первый слайд, а затем при изменении размера страницы в карусели отображается только один слайд.

демонстрация

http://jsfiddle.net/yDRj4/1/

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'); после инициализации карусели это исправили, но я уверен, что есть лучшее решение для этого, но вам, возможно, придется покопаться в источнике плагина.

http://jsfiddle.net/cZTxM/2/

У вас есть следующая строка:

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);
    }
}

http://jsfiddle.net/mblase75/7eAk2/

Другие вопросы по тегам