Search code examples
jquerycssjquery-cycle2

With jQuery Cycle 2 how do I show a part of the next and previous slides

I've been struggling with this for a while now and have seen some very complex JavaScript based solutions. I finally cracked it (for my needs anyway) with a minimal CSS solution.

Solution

  • Essentially you move the "overflow: hidden" from the slideshow element to a parent element that is wider, and then set a left margin on the slideshow element.

    I've updated a JSFiddle for a fixed layout: http://jsfiddle.net/mledwards34/x89sQ/5/

    .slideshow-container {
    overflow: hidden !important;
    width: 300px;
}

.slideshow {
    overflow: visible !important;
    margin-left: 50px;
}

    and a responsive layout: http://jsfiddle.net/mledwards34/x89sQ/6/

    .slideshow-container {
    overflow: hidden !important;
    width: 50%;
}

.slideshow {
    overflow: visible !important;
    width: 80%;
    margin-left: 10%;
}