divのスクロールバーをオーバーフローで置き換える方法：矢印付きの自動

Question

電子商取引のWebサイトのjquery画像ズームプラグインで画像間をスクロールするために使用される小さなdivを作成しようとしています。

これまで私がこれまで持っていたことは次のとおりです。ここで

<div style="width:125px;height:300px;overflow:auto;margin:auto;"> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div> 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div> 
</div> 

は、私はスクロールバーを非表示にし、代わりにdivの中に上下に移動する矢印ボタンを固定している必要jsfiddle https://jsfiddle.net/2o482ofp/

です。 は、私がグーグルの多くをやったが、私は誰もがずっと助けてくださいことができるかどうか、そうしようとしています何に関するいかなるチュートリアル、ガイド、プラグインや何かを見つけることができませんでしたhttps://www.daraz.pk/ca-sports-black-pu-running-shoes-for-men-6605753.html

で見つけることができる機能を模倣しようとしています感謝。

Answer 1

var blockHeight = 75; 
 
var marginTop = 10; 
 

 
$('.up').click(function(){ 
 
    
 
    var $elem = $('div>div:eq(0)'); 
 

 
\t \t var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10); 
 
    
 
    console.log('currentOffset', currentOffset); 
 
    var result = currentOffset - blockHeight - marginTop; 
 

 
\t \t $elem.css("margin-top", result + "px"); 
 
}); 
 

 
$('.down').click(function(){ 
 

 
    var $elem = $('div>div:eq(0)'); 
 

 
\t \t var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10); 
 
    var result = currentOffset + blockHeight + marginTop; 
 
    
 
    console.log('.currentOffset', currentOffset) 
 

 
\t \t $elem.css("margin-top", result + "px"); 
 

 
})

div > div { 
 
    
 
    transition: margin 1s ease; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<button class="up">up</button> 
 
<button class="down">down</button> 
 
<div style="width:125px;height:300px;overflow:hidden;margin:auto;"> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div> 
 
    <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div> 
 
</div>