照片库播放和暂停按钮答案

【问题标题】：Photo Gallery Play and Pause Button照片库播放和暂停按钮
【发布时间】：2020-12-03 14:52:32
【问题描述】：

亲爱的朋友们。

我在这个网站上找到了这个照片库：http://playgallery.siteseguro.ws/

我想使用它，但播放和暂停按钮无法使用。按钮不工作，我没有看到任何代码来完成这项工作。

是否有可能做到这一点？下面是优化后的代码：

<html>
<head>
    <link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
    <link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
    <link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>

<div class="col-slick-4">
      <div class="slick-gallery">

        <div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">

           <div class="slick-item">
             <div class="thumb slick_thumb_rect">
               <div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
               </div>
             </div>
           </div>
           <div class="slick-item">
             <div class="thumb slick_thumb_rect">
               <div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
               </div>
             </div>
           </div>
           <div class="slick-item">
             <div class="thumb slick_thumb_rect">
               <div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
               </div>
             </div>
           </div>
           <div class="slick-item">
             <div class="thumb slick_thumb_rect">
               <div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
               </div>
             </div>
           </div>
           <div class="slick-item">
             <div class="thumb slick_thumb_rect">
               <div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
               </div>
             </div>
           </div>
           <div class="slick-item">
             <div class="thumb slick_thumb_rect">
               <div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
               </div>
             </div>
           </div>
        </div>

<div class="slick-controls">
    <div class="slick-controls-pause"><a href="" class="slick-play"><span class="fa fa-pause"></span></a></div>
    <div class="slick-controls-play"><a href="" class="slick-play"><span class="fa fa-play"></span></a></div>
</div><br><br>

        <div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
          <div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
          <div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
          <div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
          <div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
          <div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
          <div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
        </div>

      </div>

</div> <!-- /col-slick-4 -->
    <script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
    <script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>

【问题讨论】：

如果您查看控制台，您可能会看到所有 http 文件都被 Chrome 拒绝。您需要通过 https 为他们提供服务
你能给我们看一下 slick 的脚本文件吗？我的意思是你为 slick 编写设置的那个文件。
playgallery.siteseguro.ws/js/novagaleria/slick-script.js

标签： javascript gallery photo slide image-gallery

【解决方案1】：

你必须添加一些 jquery

$('.slick-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    pauseOnDotsHover:false,
    autoplaySpeed:500,
    dots: false,
    arrows: false,
    infinite: true
});

$('#pause').click(function() {
    $('.slick-slider').slick('slickPause');
});

$('#play').click(function() {
    $('.slick-slider').slick('slickPlay');
});

然后编辑您的按钮以分别具有暂停和播放的 id 并删除 a 标签

<div class="slick-controls">
    <div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
    <div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>

如果您想让指针保持悬停状态。而不是使用 a 标签。在您的.slick-play 上使用cursor: pointer;

【讨论】：

感谢 mendgro 但是，当我输入您的代码时，播放/暂停可以正常工作，但拇指布局出现错误，我无法说明为什么会发生这种情况。顶部较小的照片很大，不会并排结束。把已经有错误的东西放上去：$('.slick-slider').slick({infinite: true });
我相信您必须将第一个滑块创建为单独的滑块（例如将其命名为 .slider-nav），然后将 asNavFor: 'slick-slider' 添加到 .slider-nav 的设置中并添加 asNavFor: '.slider-nav'到.slick-slider 的设置...请参阅此处的文档和示例：kenwheeler.github.io/slick
没错，我设法用你的提示解决了它。谢谢！