1

I'm making a slideshow that works with a responsive layout. After hours of work the slideshow is now responsive to the layout, but because of the width being 100% options fn:'scrollHorz' isn't working correctly. Because the width: 100% is being given to the left: style on the class. So my question is how can I get this to work. I would really appreciate any help.

This is my markup

<div id="test">
     <section>
        <img src="images/sliderContent_1.png" alt="Slide 1" />
    </section>
    <section>
        <img src="images/sliderContent_1.png" alt="Slide 2" />
    </section>
    <section>
        <img src="images/sliderContent_1.png" alt="Slide 2" />
    </section>
</div>

this my css

section {
  margin: 0;
}
img {
   max-width: 100%;
}
img.loading {
   margin-bottom: 2em;
   visibility: hidden;
}

#page-wrapper-test {
   width: 100%;
   margin: 0 auto;
}
#test {
   width: 100%;
}
div.loading {
   width: 100%;
}
#test section { width: 100%; }

and this is my script

  $(document).ready(function() {
     $('#test').prepend('<img class="loading" src="images/loading.gif" />');
     $('#test').after('<div id="nav" class="nav">');
     $('#test').cycle({
             slideExpr: 'section',
             fx:     'scrollHorz',
             timeout: 0,
             pager:  '#nav',
             next:   '#test',
             slideResize: true,
             containerResize: false,
             width: '100%',
             fit: 1,
         });
    });
okMonty
  • 227
  • 2
  • 4
  • 11

3 Answers3

1

Did you try setting the slideResize to false? This way the cycle pluggin doesn't change your css props.

Doesn't work with 100% width

I had the same problem, but with scrollVert, and this solved the issue.

NeverHopeless
  • 11,077
  • 4
  • 35
  • 56
Narayon
  • 415
  • 3
  • 12
0

Cycle makes the next child level of elements down from the parent slideshow container the slides. In your example <section>.

You should define the height and width of the slide elements in your CSS. Otherwise when (document).ready fires and your images are partially loaded you will get unexpected results.

squarecandy
  • 4,894
  • 3
  • 34
  • 45
0

You need to set height property for your jQuery cycle. There's some strange behavior with scrollHorz. I'd suggest you to use scrollLeft instead. But then you would need to set custom function for pager to scrollRight when needed.
Here's how your JS snippet should look like:

$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 1000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "100px",
    fit: 1,
});

Here's how you can use custom functions for your pager:

var $test = $('#test');

$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
    slideExpr: 'section',
    fx: 'scrollLeft',
    timeout: 2000,
    pager: '#nav',
    next: '#test',
    slideResize: true,
    containerResize: false,
    width: '100%',
    height: "200px",
    fit: 1,
    after: function(currSlideElement, nextSlideElement, options) {
        slideIndex = options.currSlide;
        nextIndex = slideIndex + 1;
        prevIndex = slideIndex -1;

        if (slideIndex == options.slideCount-1) {
            nextIndex = 0;
        }

        if (slideIndex == 0) {
            prevIndex = options.slideCount-1;
        }
    },
    pageAnchorBuilder: function(idx, slide) {
        return '<a href="#">' + idx + 'a</a>';
    }
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
    var idx = $navChildren.index(this);
    if (idx < slideIndex) {
        $test.cycle( idx, 'scrollRight' );
    }
    else if (idx > slideIndex) {
        $test.cycle( idx );
    }
    e.preventDefault();
});

Check it out here:
http://jsfiddle.net/vfonic/uTpqB/

Viktor
  • 2,982
  • 27
  • 32