Как я могу создать такой слайдер

Question

I want to do like this

Я имею проблему, чтобы сделать этот вид ползунка.

Вот мой HTML код:

<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> 

Я не мог найти любой ползунок, как это. Спасибо заранее.

Answer 1

Вы можете поместить любой контент в слайды любого стандартного плагина слайдера (который принимает HTML). Просто сгруппируйте элементы HTML вместе и поместите их в скользящий элемент. Ползунок должен обрабатывать .slide как слайд c.

<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>