javascript - Responsive Carousel using Cycle2 - Stack Overflow

admin管理员组

文章数量:1022964

I'm working on a carousel using the cycle2 and cycle2-carousel plugins.

Found a solution here to display variable number of items depending on resized window width.

Problem is the carousel breaks due to another slideshow.

Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.

Demo

/

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="" alt="">
        <img style="width: 100%" src="" alt="">
    </div>
    <div class="caro" >
        <img src="" alt="">
        <img src="" alt=""> 
        <img src="" alt="">
        <img src="" alt=""> 
        <img src="" alt="">
        <img src="" alt="">  
    </div>
</div>

I'm working on a carousel using the cycle2 and cycle2-carousel plugins.

Found a solution here to display variable number of items depending on resized window width.

Problem is the carousel breaks due to another slideshow.

Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.

Demo

http://jsfiddle/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>

• javascript
• jquery
• responsive-design
• carousel
• jquery-cycle2

Share Improve this question Follow edited Jan 7, 2014 at 20:24 hyperdrive asked Jan 7, 2014 at 20:10 hyperdrivehyperdrive 1,84655 gold badges2121 silver badges3636 bronze badges 4

• How is cycle2 included in that jsfiddle? I'm very confused by that in this and other fiddles. There's no link to it in the HTML. – temporary_user_name Commented Apr 4, 2014 at 18:10
• External Resources Tab, added from a CDN cdnjs./libraries/jquery.cycle2 – hyperdrive Commented Apr 4, 2014 at 18:17
• I'm afraid I don't understand what that means-- how is it linked in to the fiddle? There's no link to the CDN. – temporary_user_name Commented Apr 4, 2014 at 18:29
• @Aerovistae, open the Fiddle page, then click on External Resources tab on the side menu. You'll see a short list of resources that the fiddle uses, including cycle2 and carousel. – Gui Imamura Commented Jul 29, 2015 at 22:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

For some reason, after the first slideshow transitions, when it recreates the Carousel, it is setting all of the images to have an opacity of 0.

Adding $('.caro img').css('opacity','1'); after initializing the carousel fixed it, but I'm sure there is a better solution for this, but you might have to dig into the source of the plugin.

http://jsfiddle/cZTxM/2/

You have the following line:

var destroyCarousel = $('.caro').cycle('destroy');

...which sets destroyCarousel to the result of that method call (a jQuery object), instead of creating a function you can call to perform the destruction.

I think this is what you meant to do:

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/mblase75/7eAk2/

I'm working on a carousel using the cycle2 and cycle2-carousel plugins.

Found a solution here to display variable number of items depending on resized window width.

Problem is the carousel breaks due to another slideshow.

Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.

Demo

/

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="" alt="">
        <img style="width: 100%" src="" alt="">
    </div>
    <div class="caro" >
        <img src="" alt="">
        <img src="" alt=""> 
        <img src="" alt="">
        <img src="" alt=""> 
        <img src="" alt="">
        <img src="" alt="">  
    </div>
</div>

I'm working on a carousel using the cycle2 and cycle2-carousel plugins.

Found a solution here to display variable number of items depending on resized window width.

Problem is the carousel breaks due to another slideshow.

Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.

Demo

http://jsfiddle/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>

• javascript
• jquery
• responsive-design
• carousel
• jquery-cycle2

Share Improve this question Follow edited Jan 7, 2014 at 20:24 hyperdrive asked Jan 7, 2014 at 20:10 hyperdrivehyperdrive 1,84655 gold badges2121 silver badges3636 bronze badges 4

• How is cycle2 included in that jsfiddle? I'm very confused by that in this and other fiddles. There's no link to it in the HTML. – temporary_user_name Commented Apr 4, 2014 at 18:10
• External Resources Tab, added from a CDN cdnjs./libraries/jquery.cycle2 – hyperdrive Commented Apr 4, 2014 at 18:17
• I'm afraid I don't understand what that means-- how is it linked in to the fiddle? There's no link to the CDN. – temporary_user_name Commented Apr 4, 2014 at 18:29
• @Aerovistae, open the Fiddle page, then click on External Resources tab on the side menu. You'll see a short list of resources that the fiddle uses, including cycle2 and carousel. – Gui Imamura Commented Jul 29, 2015 at 22:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

For some reason, after the first slideshow transitions, when it recreates the Carousel, it is setting all of the images to have an opacity of 0.

Adding $('.caro img').css('opacity','1'); after initializing the carousel fixed it, but I'm sure there is a better solution for this, but you might have to dig into the source of the plugin.

http://jsfiddle/cZTxM/2/

You have the following line:

var destroyCarousel = $('.caro').cycle('destroy');

...which sets destroyCarousel to the result of that method call (a jQuery object), instead of creating a function you can call to perform the destruction.

I think this is what you meant to do:

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/mblase75/7eAk2/

本文标签： javascriptResponsive Carousel using Cycle2Stack Overflow