为了账号安全,请及时绑定邮箱和手机立即绑定

照片库播放和暂停按钮

照片库播放和暂停按钮

POPMUISE 2023-01-06 11:15:40

亲爱的朋友们。


我在这个网站上找到了这个照片库: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>



查看完整描述

1 回答

?
catspeake

TA贡献848条经验 获得超0个赞

你将不得不添加一些 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');

});


然后编辑你的按钮分别有一个 pause 和 play 的 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>


如果你想让指针悬停。而不是使用标签。用cursor: pointer;在你的 .slick-play


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信