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

Can you fix this sentence?: _"I would really like not to have a height or the on slide show."_ It makes no sense and I have no idea what you're trying to say. — Sparky, Aug 09 '11 at 22:06
Try this http://www.bluebit.co.uk/blog/Using_jQuery_Cycle_in_a_Responsive_Layout — Abhijeet Raúl Wankhade, Oct 14 '12 at 15:43

score 8 · Answer 1 · answered Jun 12 '12 at 20:40

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

});

score 6 · Answer 2 · edited Sep 20 '12 at 07:47

6

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

edited Sep 20 '12 at 07:47

Blowsie

40,239
15
88
108

answered Jul 23 '12 at 23:04

steve

430
5
7

score 2 · Answer 3 · answered Sep 19 '11 at 11:58

2

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/

answered Sep 19 '11 at 11:58

Viktor

2,982
27
32

That helps - however it doesn't work when the window is resized as JQuery Cycle adds a fixed height and width to the image as an inline style. – Nick Apr 18 '12 at 12:44

score 0 · Answer 4 · answered Nov 22 '12 at 16:29

0

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.

answered Nov 22 '12 at 16:29

Narayon

415
3
12

score 0 · Answer 5 · answered Jun 16 '13 at 20:19

0

You can use new version JQuery Cycle plugin v.2

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

It supports responsive by default.

answered Jun 16 '13 at 20:19

HEX

1,647
2
15
29

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

5 Answers5