Как заставить карусель перемещаться по строкам, а не по одному?

Question

http://jsfiddle.net/neowot/9vgr3xqa/

Привет, так что в настоящее время это настроено так, что, когда вы нажмете «рядом», оно идет прямо на 1 пункт. Как это можно изменить, чтобы оно соответствовало всей строке, т. Е. Когда вы нажмете «next», вы увидите цифры 7-14?

спасибо.

HTML

<a href="javascript:void(0);" class="btnPrevious">Previous</a> 
    <a href="javascript:void(0);" class="btnNext">Next</a> 
    <div class="carousel"> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
      <li>5</li> 
      <li>6</li> 
      <li>7</li> 
      <li>8</li> 
      <li>9</li> 
      <li>10</li> 
      <li>11</li> 
      <li>12</li> 
      <li>13</li> 
      <li>14</li> 
     </ul> 
    </div> 

CSS

.carousel{ 
      padding-top: 20px; 
      width: 357px; 
      overflow: hidden; 
      height: 50px; 
      position: relative; 
     }.carousel ul{ 
      position: relative; 
      list-style: none; 
      list-style-type: none; 
      margin: 0; 
      height: 50px; 
      padding: 0; 
     }.carousel ul li{ 
      position: absolute; 
      height: 25px; 
      width: 50px; 
      float: left; 
      margin-right: 1px; 
      background: #f2f2f2; 
      text-align: center; 
      padding-top: 25px; 
     } 

JS

$(function(){ 
      var carousel = $('.carousel ul'); 
      var carouselChild = carousel.find('li'); 
      var clickCount = 0; 
      var canClick = true; 

      itemWidth = carousel.find('li:first').width()+1; //Including margin 

      //Set Carousel width so it won't wrap 
      carousel.width(itemWidth*carouselChild.length); 

      //Place the child elements to their original locations. 
      refreshChildPosition(); 

      //Set the event handlers for buttons. 
      $('.btnNext').click(function(){ 
       if(canClick){ 
        canClick = false; 
        clickCount++; 

        //Animate the slider to left as item width 
        carousel.stop(false, true).animate({ 
         left : '-='+itemWidth 
        },600, function(){ 
         //Find the first item and append it as the last item. 
         lastItem = carousel.find('li:first'); 
         lastItem.remove().appendTo(carousel); 
         lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth)); 
         canClick = true; 
        }); 
       } 
      }); 

      $('.btnPrevious').click(function(){ 
       if(canClick){ 
        canClick = false; 
        clickCount--; 
        //Find the first item and append it as the last item. 
        lastItem = carousel.find('li:last'); 
        lastItem.remove().prependTo(carousel); 

        lastItem.css('left', itemWidth*clickCount);    
        //Animate the slider to right as item width 
        carousel.finish(true).animate({ 
         left: '+='+itemWidth 
        },300, function(){ 
         canClick = true; 
        }); 
       } 
      }); 

      function refreshChildPosition(){ 
       carouselChild.each(function(){ 
        $(this).css('left', itemWidth*carouselChild.index($(this))); 
       }); 
      } 
     }); 

Answer 1

Если вы знаете точное количество, с которым вы хотите переместить карусель просто изменить следующие две строки в $ ('.btnPrevious'). click (function() и $ ('.btnNext'). click (function() {:

left : '-='+itemWidth 

в

left : '-='+itemWidth*numberToMoveWith 

и

left: '+='+itemWidth 

в

left: '+='+itemWidth*numberToMoveWith 

Если нет, то вы должны подсчитать количество элементов, видимых, например, как это:

function numberOfElements() { 
      var carWidth=carousel.parent().width(); 
      var elemWidth=carouselChild.width(); 
      return Math.floor(carWidth/elemWidth); 
     } 

Вот полный Javascript код, который вы должны использовать, бесконечная прокрутка ошибка уже исправлена ​​здесь:

$(function(){ 
     var carousel = $('.carousel ul'); 
     var carouselChild = carousel.find('li'); 
     var clickCount = 0; 
     var canClick = true; 

     function numberOfElements() { 
      var carWidth=carousel.parent().width(); 
      var elemWidth=carouselChild.width(); 
      return Math.floor(carWidth/elemWidth); 
     } 

     var moveWith=numberOfElements(); 

     itemWidth = carousel.find('li:first').width()+1; //Including margin 

     //Set Carousel width so it won't wrap 
     carousel.width(itemWidth*carouselChild.length); 

     //Place the child elements to their original locations. 
     refreshChildPosition(); 



     //Set the event handlers for buttons. 
     $('.btnNext').click(function(){ 
      if(canClick){ 
       canClick = false; 

       //Animate the slider to left as item width 
       carousel.stop(false, true).animate({ 
        left : '-='+itemWidth*moveWith 
       },600, function(){ 
        //Find the first item and append it as the last item. 
        for (var i=0; i<moveWith; i++) { 
         clickCount++; 
         lastItem = carousel.find('li:first'); 
         lastItem.remove().appendTo(carousel); 
         lastItem.css('left', (((carouselChild.length-1+clickCount)*(itemWidth)))); 
        } 
        canClick = true; 
       }); 
      } 
     }); 

     $('.btnPrevious').click(function(){ 
      if(canClick){ 
       canClick = false; 
       //Find the first item and append it as the last item. 
       for (var i=0; i<moveWith; i++) { 
       clickCount--; 
       lastItem = carousel.find('li:last'); 
       lastItem.remove().prependTo(carousel); 
       lastItem.css('left', itemWidth*clickCount); 
       } 
       //Animate the slider to right as item width 
       carousel.finish(true).animate({ 
        left: '+='+itemWidth*numberOfElements() 
       },300, function(){ 
        canClick = true; 
       }); 
      } 
     }); 

     function refreshChildPosition(){ 
      carouselChild.each(function(){ 
       $(this).css('left', itemWidth*carouselChild.index($(this))); 
      }); 
     } 
    }); 

Изменено JSFiddle: http://jsfiddle.net/9vgr3xqa/2/