슬라이드

Question

HTML :

<div class="inline-wrapper"> 
    <div class="inline-blocks" id="f">123</div> 
    <div class="inline-blocks" id="s">123</div> 
    <div class="inline-blocks" id="t">123</div> 
    <div class="inline-blocks" id="fo">123</div> 
</div> 

CSS :

html, body { 
    width: 100%; 
    height: 100%; 
/* overflow: hidden;*/ 
} 

.inline-wrapper{ 
    width: 400%; 
    height: 100%; 
    font-size: 0; 
    position: relative; 
} 

.inline-blocks{ 
    display: inline-block; 
    width: 25%; 
    height: 100%; 
    vertical-align: top; 
    position: relative; 
} 

>.inline-blocks:nth-child(1){ 
    background-color: #000; 
} 

.inline-blocks:nth-child(2){ 
    background-color: blue; 
} 

.inline-blocks:nth-child(3){ 
    background-color: red; 
} 

.inline-blocks:nth-child(4){ 
    background-color: green; 
} 

은 어떻게 ID없이 밀어 수 있습니까? 이것은 실제로 슬라이더의 작업입니다. 그러나 나는 그 논리를 이해할 수 없다. ID없이 뒤집는 방법을 알고 싶습니다. 블록을 검사하여 현재 클래스를 제공해야합니다.

Answer 1

자동 슬라이드

HTML :

<div class="inline-wrapper"> 
    <div class="inline-blocks" id="f">123</div> 
    <div class="inline-blocks" id="s">123</div> 
    <div class="inline-blocks" id="t">123</div> 
    <div class="inline-blocks" id="fo">123</div> 
</div> 

jQuery를 :

(function() { 
    var numDivs = $('.inline-wrapper').children().length; //Count children ELements 
    var counter = 1; 

    function slide(time, counter) { 
     var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element 
     var position = $currentDiv.position(); //get position of next element 

     if (numDivs > 1) { 
      $('html,body').animate({ 
       scrollLeft: position.left 
      }, time/2); //Animate to next element 
     } 
    }; 

    $('.inline-blocks').on('click', function() { 
     counter = counter + 1; 
     slide(2000, counter); 
    }); 
})(); 

DEMO