Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<ul class="slideshow"> <li><img alt="" src="http://malsup.github.io/images/beach1.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> <li><img alt="" src="http://malsup.github.io/images/beach2.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> <li><img alt="" src="http://malsup.github.io/images/beach3.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> <li><img alt="" src="http://malsup.github.io/images/beach4.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong> </div> </li> <li><img alt="" src="http://malsup.github.io/images/beach5.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> <li><img alt="" src="http://malsup.github.io/images/beach6.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> <li><img alt="" src="http://malsup.github.io/images/beach7.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> <li><img alt="" src="http://malsup.github.io/images/beach8.jpg" /> <div class="caption">Head 1<br /> <strong>Sub 1</strong></div> </li> </ul> <div class="prevnext"> <a href="#" id="prev4" class="skew-backward">PREV</a> <a href="#" id="next4" class="skew-forward">NEXT</a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* Slider */ ul.slideshow { overflow: hidden; margin:0; padding:0; list-style-type:none; margin-bottom:-80px; margin-left: -10px; margin-right: -10px; } li.cycle-slide { text-align:center; position:relative; text-align:center; border-left: 10px solid transparent; border-right: 10px solid transparent; } .cycle-slide div { bottom:100px; color:#FFF; position:relative; left:0; right:0; font-size:24px; font-weight:300; text-transform:uppercase; } .cycle-slide div strong { font-weight:700; } .cycle-slide img { width: 100%; } .slider { position:relative; } .prevnext { position:absolute; top:50%; width:100%; margin-top:-90px; } #prev4 { position:absolute; left:40px; background-image:url(../images/prev.png); width:70px; height:140px; } #next4 { position:absolute; right:0; background-image:url(../images/next.png); width:70px; height:140px; } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
function buildCarousel(visibleSlides) { $('.slideshow').cycle({ fx: 'carousel', speed: 600, slides: 'li', carouselVisible: visibleSlides, carouselFluid: true, swipe:true, swipefx:'scrollHorz', next: '#next4', prev: '#prev4', pager: '#gallery-chooser ul', }); $('.slideshow li img').css('opacity','1'); } function initCycle() { var width = $(document).width(); var visibleSlides = 4; if ( width < 400 ) {visibleSlides = 1} else if(width < 700) {visibleSlides = 2} else if(width < 1024) {visibleSlides = 3} else if(width < 1400) {visibleSlides = 4} else {visibleSlides = 5}; buildCarousel(visibleSlides); } function reinit_cycle() { var width = $(window).width(); var destroyCarousel = function() { $('.slideshow').cycle('destroy'); } if (width < 400) { destroyCarousel(); // call the function reinitCycle(1); } else if (width > 400 && width < 700) { destroyCarousel(); reinitCycle(2); } else if (width > 700 && width < 1024) { destroyCarousel(); reinitCycle(3); } else if (width > 1024 && width < 1400) { destroyCarousel(); reinitCycle(4); } 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(); }); |