Wie kann ich diese Art von Schiebern erstellen

Question

I want to do like this

ich Problem habe diese Art von Schieber zu machen.

Hier ist mein html-Code:

<div class="recent-post"> 
    <a class="prev" href="#"></a> 
    <a class="next" href="#"></a> 
    <div class="post"> 
     <img src="photo.jpg"> 
     <p>Content 1</p> 
    </div> 
    <div class="post"> 
     <img src="photo2.jpg"> 
     <p>Content 2</p> 
    </div> 
    <div class="post"> 
     <img src="photo3.jpg"> 
     <p>Content 3</p> 
    </div> 
    <div class="post"> 
     <img src="photo4.jpg"> 
     <p>Content 4</p> 
    </div> 
    <div class="post"> 
     <img src="photo5.jpg"> 
     <p>Content 5</p> 
    </div> 
    <div class="post"> 
     <img src="photo6.jpg"> 
     <p>Content 6</p> 
    </div> 
    <div class="post"> 
     <img src="photo7.jpg"> 
     <p>Content 7</p> 
    </div> 
    <div class="post"> 
     <img src="photo8.jpg"> 
     <p>Content 8</p> 
    </div> 
</div> 

ich jeden Schieber nicht wie diese finden könnte. Vielen Dank im Voraus.

Answer 1

Sie können den Inhalt in die Folien jedes Standard-Slider-Plugins (das HTML akzeptiert) einfügen. Gruppieren Sie einfach die HTML-Elemente und fügen Sie sie in das Schiebeelement ein. Der Schieberegler sollte .slide als Folie behandeln.

<div class="recent-post"> 
    <a class="prev" href="#"></a> 
    <a class="next" href="#"></a> 
    <div class="slide"> 
    <div class="post"> 
     <img src="photo.jpg"> 
     <p>Content 1</p> 
    </div> 
    <div class="post"> 
     <img src="photo2.jpg"> 
     <p>Content 2</p> 
    </div> 
    <div class="post"> 
     <img src="photo3.jpg"> 
     <p>Content 3</p> 
    </div> 
    <div class="post"> 
     <img src="photo4.jpg"> 
     <p>Content 4</p> 
    </div> 
    </div> 
    <div class="slide"> 
    <div class="post"> 
     <img src="photo5.jpg"> 
     <p>Content 5</p> 
    </div> 
    <div class="post"> 
     <img src="photo6.jpg"> 
     <p>Content 6</p> 
    </div> 
    <div class="post"> 
     <img src="photo7.jpg"> 
     <p>Content 7</p> 
    </div> 
    <div class="post"> 
     <img src="photo8.jpg"> 
     <p>Content 8</p> 
    </div> 
    </div> 
</div>