jQuery Carousel (CarouFredSel) останавливает анимацию, если только 3 изображения

Question

OK, немного сложный вопрос. У меня есть карусель на моей странице (с помощью плагина CarouFredSel), иногда на этой карусели будет 3 изображения, иногда 4 или более. Карусель настроена на отображение 3 изображений за раз, при этом центральное изображение больше.

Моя проблема в том, что если у меня есть только 3 изображения, я не могу сдвинуть карусель влево и вправо, чтобы сделать смежные изображения центральными (и, следовательно, большими). Чтобы обойти это, я добавляю фиктивный образ (т. Е. Просто напишу <img src="" />, так что слайдер считает, что есть 4 изображения, это позволяет мне скользить, однако я хочу, чтобы можно было остановить слайдер, прежде чем попасть на 4-й «фиктивный» образ.

Мой HTML выглядит следующим образом:

<div id="wrapper"> 
     <div id="carousel"> 
      <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" /> 
      <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Birds.jpg" /> 
      <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/christmas_alt2.jpg" /> 
      <img src="" /> 

     </div> 
      <a id="prev2" class="prev" href="#">&lt;</a> 
      <a id="next2" class="next" href="#">&gt;</a> 
    </div> 

и JQuery для слайдера плагина:

$(function() { 

      var _center = { 
       width: 275, 
       height: 390, 
       marginLeft: 0, 
       marginTop: 0, 
       marginRight: 0 
      }; 
      var _left = { 
       width: 140, 
       height: 200, 
       marginLeft: 0, 
       marginTop: 100, 
       marginRight: 20 
      }; 
      var _right = { 
       width: 140, 
       height: 200, 
       marginLeft: 20, 
       marginTop: 100, 
       marginRight: 0 
      }; 
      var _outLeft = { 
       width: 100, 
       height: 100, 
       marginLeft: 150, 
       marginTop: 200, 
       marginRight: -150 
      }; 
      var _outRight = { 
       width: 100, 
       height: 100, 
       marginLeft: 0, 
       marginTop: 200, 
       marginRight: 0 
      }; 
      $('#carousel').carouFredSel({ 
       auto: false, 
       prev: { 
        button: "#prev2", 
        key: "left" 
       }, 
       swipe: true, 
       width: 597, 
       height: 392, 
       align: false, 
       items: { 
        visible: 3, 
        width: 100 
       }, 

       next: { 
        button: "#next2", 
        key: "right", 
        items: 1, 
        duration: 400, 
        onBefore: function(data) { 
         data.items.old.eq(0).animate(_outLeft); 
         data.items.visible.eq(0).animate(_left).removeClass('center right').addClass('left'); 
         data.items.visible.eq(1).animate(_center).addClass('center').removeClass('right left'); 
         data.items.visible.eq(2).animate(_right).css({ zIndex: 1 }).removeClass('left center').addClass('right'); 
         data.items.visible.eq(2).next().css(_outRight).css({ zIndex: 0 }); 

         setTimeout(function() { 
          data.items.old.eq(0).css({ zIndex: 1 }); 
          data.items.visible.eq(0).css({ zIndex: 2 }); 
          data.items.visible.eq(1).css({ zIndex: 3 }); 
          data.items.visible.eq(2).css({ zIndex: 2 }); 
         }, 200); 
        } 
       }, 
       prev: { 
        button: "#prev2", 
        key: "left", 
        items: 1, 
        duration: 400, 
        onBefore: function(data) { 
         data.items.old.eq(2).animate(_outRight); 
         data.items.visible.eq(0).animate(_left).css({ zIndex: 1 }).removeClass('center right').addClass('left'); 
         data.items.visible.eq(0).prev().css(_outLeft).css({ zIndex: 0 }); 
         data.items.visible.eq(1).animate(_center).addClass('center').removeClass('right left'); 
         data.items.visible.eq(2).animate(_right).removeClass('left center').addClass('right'); 

         setTimeout(function() { 
          data.items.old.eq(2).css({ zIndex: 1 }); 
          data.items.visible.eq(2).css({ zIndex: 2 }); 
          data.items.visible.eq(1).css({ zIndex: 3 }); 
          data.items.visible.eq(0).css({ zIndex: 2 }); 
         }, 200); 
        } 
       } 
      }); 
      $('#carousel').children().eq(0).css(_left).css({ zIndex: 2 }).addClass('left').removeClass('center right'); 
      $('#carousel').children().eq(1).css(_center).css({ zIndex: 3 }).addClass('center').removeClass('right left'); 
      $('#carousel').children().eq(2).css(_right).css({ zIndex: 2 }).addClass('right').removeClass('center left'); 
      $('#carousel').children().eq(3).css(_outRight).css({ zIndex: 1 }); 
      $('#carousel').children().eq(4).css(_outLeft).css({ zIndex: 1 }); 

     }); 

и здесь является JSFiddle, так что вы можете увидеть, что я имею в виду: http://jsfiddle.net/hvZzc/1/

Answer 1

Вам необходимо добавить минимальный код:

«Minimum: Number Минимальное количество предметов, необходимых для создания карусели. Если нуль, то номер для items.visible наследуется и увеличился на 1.»(от их website)

добавив, что тег в код этот один будет выглядеть:

  items: { 
       visible: 3, 
       minimum: 3, 
       width: 100 
      }, 

вместо:

  items: { 
       visible: 3, 
       width: 100 
      }, 

http://jsfiddle.net/hvZzc/2/