我怎样才能创建这种滑块

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视为幻灯片。

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