Fatal编程技术网
  • javascript/
  • Javascript 照片库播放和暂停按钮

Javascript 照片库播放和暂停按钮

javascript

Javascript 照片库播放和暂停按钮,javascript,gallery,photo,slide,image-gallery,Javascript,Gallery,Photo,Slide,Image Gallery,亲爱的朋友们 我在这个网站上找到了这个照片库： 我想使用它，但“播放和暂停”按钮无法使用。按钮不起作用，我看不到任何代码使其起作用 有可能做到这一点吗？下面是优化后的代码： <html> <head> <link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/> <

亲爱的朋友们

我在这个网站上找到了这个照片库：

我想使用它，但“播放和暂停”按钮无法使用。按钮不起作用，我看不到任何代码使其起作用

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

<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>
您必须添加一些jquery

$（'.slick滑块'）.slick({
幻灯片放映：1，
幻灯片滚动：1，
自动播放：对，
pauseOnDotsHover:错，
自动播放速度：500，
点：错，
箭头：错，
无限：真的
});
$（“#暂停”）。单击（函数（）{
$（'.slick slider'）。slick（'slickPause'）；
});
$（“#播放”）。单击（函数（）{
$（'.slick slider'）.slick（'slickPlay'）；

});如果您在控制台中查看，您可能会看到所有http文件都被Chrome拒绝。你需要通过httpsCan为他们服务你给我们看slick的脚本文件吗？我指的是你为slick编写设置的文件。谢谢mendgro。不过，当我输入你的代码时，播放/暂停工作正常，但拇指的布局有错误，我说不出为什么会发生这种情况。顶部较小的照片较大，并且没有并排结束。只需将已经有错误的内容放入：$（'.slick slider'）.slick（{infinite:true}）；我认为您必须将第一个滑块创建为一个单独的滑块（例如，将其命名为
.slider nav
），然后将
asNavFor:'slick slider'
添加到
.slider nav
的设置中，并将
asNavFor:'.slider nav'
添加到
的设置中。。。请参阅此处的文档和示例：没错，我用您的提示解决了这个问题。非常感谢。