照片庫播放和暫停按鈕
[英]Photo Gallery Play and Pause Button
問題描述
親愛的朋友們。
我在這個網站上找到了這個照片庫： 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>
1 個解決方案
解決方案1
1 已采納 2020-08-13 18:01:11
你將不得不添加一些 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>
如果您想將指針保留在 hover 上。 而不是使用 a 標簽。 使用cursor: pointer; 在你的.slick-play上
Blueimp畫廊播放暫停
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.