javascript - 如何为也可以包含视频的 wordpress 帖子制作滑块？

Question

我希望我的 Wordpress 页面在滑块中显示帖子图片和视频。所以我需要一种方法为每个帖子制作一个滑块。我该怎么做？

标签： javascripthtmlwordpresssliderposts

Answer 1

再会。
我的选择是光滑的滑块。
请检查网站Slick Slider 官方
运行代码片段，您可以用您的视频替换图像

$(".slider").slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 500,
  slide: 'div',
  cssEase: 'linear'
});

.slider{
    width: 100%;
    margin: 0 auto;
    text-align:center;
}
.image img{
    margin: auto;
    width: 55%;
    height: 55%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>

<h2>Slider demo</h2>
<div class="slider fade">
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
    </div>
  </div>  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
</div>