Отзывчивая полноразмерная карусель с carouFredSel.js

Question

В настоящее время я использую carouFredSel.js для обслуживания карусели полной ширины на моем сайте. Я выбрал этот плагин из-за его возможностей полной ширины, с возможностью частично отображать предыдущие и следующие изображения на левом и правом краях экрана.

Я также использую Bootstrap 3, но не удалось добиться такого же поведения, поэтому я решил пойти с плагином.

Проблема, с которой я столкнулся, делает отзыв карусели отзывчивыми. В плагине есть возможность сделать его отзывчивым, добавив опции «responsive: true» в параметры, но когда я это сделаю, он разбивает макет.

Мой код с изображениями-заполнителями можно найти по адресу http://jsfiddle.net/vUCZ8/. Я бы рекомендовал смотреть на полный экран в результате http://jsfiddle.net/vUCZ8/embedded/result/

#intro { 
      width: 580px; 
      margin: 0 auto; 
     } 
     .wrapper { 
      background-color: white; 
      width: 480px; 
      margin: 40px auto; 
      padding: 50px; 
      box-shadow: 0 0 5px #999; 
     } 
     #carousel img { 
      display: block; 
      float: left; 
     } 
     .main-content ul { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
      display: block; 
     } 
     .main-content li { 
      display: block; 
      float: left; 
     } 
     .main-content li img { 
      margin: 0 20px 0 20px; 
     } 
     .list_carousel.responsive { 
      width: auto; 
      margin-left: 0; 
     } 
     .clearfix { 
      float: none; 
      clear: both; 
     } 
     .prev { 
      float: left; 
      margin-left: 10px; 
     } 
     .next { 
      float: right; 
      margin-right: 10px; 
     } 
     .pager { 
      float: left; 
      width: 300px; 
      text-align: center; 
     } 
     .pager a { 
      margin: 0 5px; 
      text-decoration: none; 
     } 
     .pager a.selected { 
      text-decoration: underline; 
     } 
     .timer { 
      background-color: #999; 
      height: 6px; 
      width: 0px; 
     } 

$(function() { 
    $('#carousel').carouFredSel({ 
     width: '100%', 
     items: { 
      visible: 3, 
      start: -1 
     }, 
     scroll: { 
      items: 1, 
      duration: 1000, 
      timeoutDuration: 3000 
     }, 
     prev: '#prev', 
     next: '#next', 
     pagination: { 
      container: '#pager', 
      deviation: 1 
     } 
    }); 
}); 

<div class="main-content"> 
    <ul id="carousel"> 
     <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
      <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
      <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
       <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
    </ul> 
    <div class="clearfix"></div> 
</div> 

Answer 1

Это правильный способ реализации отзывчив с помощью этого плагина:

responsive: true // you must add this 

Как вы можете видеть, что это не нарушает и прекрасно работает. http://jsfiddle.net/3mypa/ Это шаблон STANDARD.

Я считаю, вы ищете другой шаблон, не тот, что вы ищете?

http://coolcarousels.frebsite.nl/c/44/coolcarousel.html

Answer 2

Я смотрел на этот вопрос, а также и лучшее, что я нашел, чтобы наблюдать за размером окна и реагировать соответствующим образом. Например

$(window).resize(function(){ 
//listens for window resize 
    var TimeOutFunction; 
    clearTimeout(TimeOutFunction); 
    //To try and make sure this only fires after the window has stopped moving 
    TimeOutFunction=setTimeout(function(){ 
     $('.slides').trigger("destroy",true); 
     //Destroys the current carousel along with all it's settings - extreme but It wouldn't accept setting changes once running 
     if($(window).width()<1170){ 
      //The width should be the width of a single image since I assume your using the same image size for all images on the slider. 
      $(function(){ 
       $('#carousel').find('.slides').carouFredSel({ 
        width:'100%', 
        items:{ 
         visible:1, 
         start:-1 
        }, 
        responsive:true, 
        minimum:3 
       }) 
      }) 
     }else{ 
      $(function(){ 
       $('#carousel').find('.slides').carouFredSel({ 
        width:'100%', 
        items:{ 
         visible:3, 
         start:-1 
        }, 
        responsive:false, 
        minimum:3 
       }) 
      }) 
     } 
    },500) 
}) 

Таким образом, после того, как размер окна ниже ширины изображений и ответного действия должны пнуть в это делает, но когда-то это больше, чем одно изображение снова перемещается назад в усеченном виде.

Понятно, что это может привести к увеличению стоимости переносов, но вы должны дать вам правильную основу для работы.