Vanilla Javascript Slider Konu

Question

Basit vanilya Javascript kaydırıcısı oluşturmaya çalışıyorum ama bazı sorunları yaşıyorum, umarım birisi bana yardımcı olabilir.

html kodu:

<div class="box" id="boxid"> 
     <div class="inside_box" id="inside_box_id"> 
      <ul class="main_ul" id="main_ul_id"> 
       <li class="one" id="oneid"><a href = "#"></a></li> 
       <li class="one" id="twoid"><a href = "#"></a></li> 
       <li class="one" id="threeid"><a href = "#"></a></li> 
       <li class="one" id="fourid"><a href = "#"></a></li> 
       <li class="one" id="fiveid"><a href = "#"></a></li> 
      </ul> 
     </div> <!-- end of inside_box --> 
    </div><!-- end of box --> 

    <button id="previd" class="btn">Prev</button> 
    <button id="nextid" class="btn">Next</button> 

css kodu: Şu anda

body { 
    background:grey; 
    font-family: sans-serif; 
} 

.box { 
    width:800px; 
    height:300px; 
    border:1px solid black; 
    margin: 0 auto; 
} 

.inside_box { 
    width:800px; 
    height:300px; 
    padding:0px; 
    margin:0px; 
    overflow: hidden; 
} 

.main_ul { 
    width:4000px; 
    padding:0px; 
    margin:0px; 
} 

.main_ul li { 
    list-style: none; 
    float:left; 
} 

.one { 
    width:800px; 
    height:300px; 
} 

#oneid {background:blue;} 
#twoid {background:orange;} 
#threeid {background:brown;} 
#fourid {background:green;} 
#fiveid {background:purple;} 


.btn { 
    padding:10px; 
    width:100px; 
    margin-left:50%; 
    cursor: pointer; 
    margin-top:10px; 
} 

JS kodunun

var prevBtn = document.getElementById("previd"); 
var nextBtn = document.getElementById("nextid"); 

nextBtn.addEventListener("click", function(){ 
    var slideLeft = document.getElementById("main_ul_id"); 
    slideLeft.style.marginLeft = "-800px"; 
}, false); 

ben ikinci slayta beni alır İleri düğmesine tıkladığınızda ancak tekrar tıkladığımda hiçbir şey yapmaz. Tıklandığında her seferinde marj-sol 800px'e tıkladığımda bunu nasıl yapabilirim?

Teşekkürler.

Answer 1

Akım değeri almalı ve'dan çıkarmalısınız.

Next (İleri) düğmesini ilk kez tıklattığınızda, margin-left değerini -800px olarak ayarlayacak ve sonucu göreceksiniz. Ancak bir sonraki basıştayeniden -800px olarak ayarlanacaktır. Aşağıdaki gibi

şey:

nextBtn.addEventListener("click", function() { 
    var slideLeft = document.getElementById("main_ul_id"); 
    var style = slideLeft.style; 
    var totalImages = 5; 
    var margin = 800; 

    style.marginLeft = (parseInt(style.marginLeft || "0") - margin)%(totalImages*margin) + "px"; 
}, false); 

(totalImages*margin) ile kalan alarak son slayttan sonraki çarptıktan sonra ilk slaydı getirecektir. En uygun mantık değil, sadece size bir fikir vermek.

İşte çalışan JSFiddle var: https://jsfiddle.net/dsa3du93/7/