Making a jQuery cycle plugin become responsive to the layout pixels?

Question

This is my markup for a slideshow. As you can see in my stylesheet I am specifying the slideshow's height explicitly, but I would really like to avoid this, so that when I make the browser larger or smaller the slideshow size changes as well.

<section class="contentSlider">
    <section class="contentSliderControls">
        <a href="#" class="controlPrev">Prev</a>
        <a href="#" class="controlNext">Next</a>
        <ul class="controlSlides"></ul>
    </section>
    <ul class="slides">
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
        <li><img class="sliderImage" src="/images/sliderContent_1.png" alt="" /></li>
    </ul>

This is my javascript

$(function() {
    $('.slides').cycle({
        fx:      'scrollHorz',
        timeout:  0,
        prev:    '.contentSliderControls > .controlPrev',
        next:    '.contentSliderControls > .controlNext',
        pager:   '.contentSliderControls > .controlSlides',
        pagerAnchorBuilder: pagerFactory
    });

function pagerFactory(idx, slide) {
    return '<li><a href="#">'+(idx+1)+'</a></li>';
    };
});

and my css

/* Content Slider */

.contentSlider {
position: relative;
}

.contentSlider, .contentSlider > .slides {
height: 504px;
}

.controlSlides > li {
float: left;
}

.contentSlider > .slides {
z-index: 1;
}

.sliderImage {
width: 100%;
}

.contentSliderControls {
height: 504px;
position: absolute;
width: 100%;
z-index: 2;
}

.contentSliderControls > .controlPrev {
background-color: #ffffff;
color: #000000;
display: block;
float:left;
height: 504px;
opacity: .5;
width: 10%;
}

.contentSliderControls > .controlNext {
background-color: #ffffff;
color: #000000;
display: block;
float:right;
height: 504px;
opacity: .5;
width: 10%;
}

Any help is greatly appreciated

Answer 1

I've solved this problem like this:

var activeSlide;

$(document).ready(function() {

$('.cycle').cycle({
    containerResize: 1,
    width: 'fit',
    after: function(curr, next, obj) {
        activeSlide = obj.currSlide;
    }
});

$(window).resize(function(){
    $('.cycle').cycle('destroy');
    $('.cycle').each(function(){
        newWidth = $(this).parent('div').width();
        $(this).width(newWidth);
        $(this).height('auto');
        $(this).children('div').width(newWidth);
        $(this).children('div').height('auto');
    });
    $('.cycle').cycle({
        containerResize: 1,
        width: 'fit',
        after: function(curr, next, obj) {
            activeSlide = obj.currSlide;
        },
        startingSlide: activeSlide
    });
});

});

Answer 2

Try this:

$('.slides').cycle({
    fx:      'scrollHorz',
    timeout:  0,
    prev:    '.contentSliderControls > .controlPrev',
    next:    '.contentSliderControls > .controlNext',
    pager:   '.contentSliderControls > .controlSlides',
    pagerAnchorBuilder: pagerFactory,
    slideResize: true,
    containerResize: false,
    width: '100%',
    fit: 1
});

Answer 3

You would need to set max-width: 100% as well for your .sliderImage class. That should fix the problem. Keep in mind that you need big enough image and that the height of the cycle container is still fixed value.

Here's your example with max-width: 100% css attribute added: http://jsfiddle.net/vfonic/YH5je/

Answer 4

Just add a dummy image with your max width, like this:

http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout

Here's an example:

http://dev.bluebit.co.uk/mark/cycle/index-basic.html

I guess someone already told you this.

Answer 5

You can use new version JQuery Cycle plugin v.2

http://jquery.malsup.com/cycle2/

It supports responsive by default.