カスタム垂直スライダをアニメーション化する方法Jquery

Question

現在、次のおよび前のボタンをクリックすると、リストの高さが調整されます。高さを増減するのではなく、現在のコンテンツを新しいコンテンツセットに置き換えたいと考えています。

期待：

1. 私は、次/前のページをクリックすると、現在の表示リストは、いくつかのスライドアニメーションでアイテムの新しいセットと交換しなければなりません。
2. また、3つのアイテムを表示する必要があるたびに、次の/前回の繰り返しが完了した現在のシナリオでは、2つのアイテムだけが表示されます。

これは私が試したものです：

JS：

$(document).ready(function() { 
    size_li = $("#list li").size(); 
    x=3; 
    $('#list li:lt('+x+')').show(); 
    $('#next').click(function() { 
     x= (x+3 <= size_li) ? x+3 : size_li; 
     $('#list li:lt('+x+')').show(); 
     $('#prev').show(); 
     if(x == size_li){ 
      $('#next').hide(); 
     } 
    }); 
    $('#prev').click(function() { 
     x=(x-3<0) ? 3 : x-3; 
     $('#list li').not(':lt('+x+')').hide(); 
     $('#next').show(); 
     if(x < 3){ 
      $('#prev').hide(); 
     } 
    }); 
}); 

JSフィドル：

Demo Link

Answer 1

私は少し違った問題に近づきました。ここにはfiddleがあります。

私の解決策の骨子は、私はスムーズスクロール効果を行うためにjQueryのanimate機能を使用していたということです。

$('ul').animate({ 
    scrollTop: $('ul').scrollTop() + height_to_show 
}, 500); 

一つのキャッチは、しかし、ulとli要素がが固定されている必要があるということです高さ。これらの高さは、あなたが設定した以下の変数に基づいて内部で計算されています

/** 
* Total number of elements in the list 
* @type {Number} 
*/ 
var num_of_elems = 8; 

/** 
* Static height of each element (in pixels) 
* @type {Number} 
*/ 
var height_of_elem = 25; 

/** 
* Number of elements you want to show in the page 
* @type {Number} 
*/ 
var num_of_elems_to_show = 3; 

/** 
* The visible height of the ul 
* @type {Number} 
*/ 
var height_to_show = 0; //calculated internally 

---

UPDATEがここに更新さfiddleです。

表示されている現在のページに基づいてprevとnextボタンを非表示にする機能が追加されました。

/** 
* Show or hide the prev and next button depending on the current_page 
*/ 
var show_hide_buttons = function() { 
    if (current_page === Math.ceil(num_of_elems/num_of_elems_to_show) - 1) { 
     $('#next').hide(); 
    } else { 
     $('#next').show(); 
    } 

    if (current_page === 0) { 
     $('#prev').hide(); 
    } else { 
     $('#prev').show(); 
    } 
}; 

Answer 2

私は、これは別のオプションと少し異なるアニメーションであるとしてちょうどたいが、このフィドルを残して、あなたは解決策を持って知っています。

$(document).ready(function() { 
 
    
 
    $('#list li:lt(3)').show(); 
 
    
 
    $('#next').click(function() { 
 
    \t $('#prev').show(); 
 
    var last = $('#list').children('li:visible:last'); 
 
    last.nextAll('#list li:lt(3)').toggle(200); 
 
    last.next().prevAll('#list li').hide(200); 
 
    
 
    var $this = $(this); 
 
    if ($('#list li').last().is(':visible')){ 
 
    \t $this.hide(); 
 
    } 
 
\t }); 
 
    
 
    $('#prev').click(function() { 
 
    \t $('#next').show(); 
 
    var first = $('#list').children('li:visible:first'); 
 
    first.prevAll('#list li:lt(3)').toggle(200); 
 
    first.prev().nextAll('#list li').hide(200) 
 
    
 
    var $this = $(this); 
 
    if ($('#list li').first().is(':visible')){ 
 
    \t $this.hide(); 
 
    } 
 
\t }); 
 
    
 
});

ul,li,ol{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.l_swiper{ 
 
    border: 1px solid #333; 
 
    width: 50%; 
 
    padding: 20px; 
 
} 
 

 
#list{ 
 
    overflow: hidden; 
 
    max-height: 117px; 
 
} 
 
#list li{ 
 
    display: none; 
 
    padding : 10px; 
 
    border-bottom : 1px solid #333; 
 
} 
 
#list li:last-child{ 
 
    margin-bottom: 39px; 
 
} 
 
#next{ 
 
    float: right; 
 
    border: 1px solid #333; 
 
    padding: 10px; 
 
    margin-top : 20px; 
 
    cursor: pointer; 
 
} 
 
#prev{ 
 
    float: left; 
 
    border: 1px solid #333; 
 
    padding: 10px; 
 
    margin-top : 20px; 
 
    cursor: pointer; 
 
} 
 
.clearfix{ 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="l_swiper"> 
 
    <ul id="list"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
</ul> 
 
<div id="prev">prev</div> 
 
<div id="next">Next</div> 
 
<div class="clearfix"></div> 
 
</div>