Question

我创造了一个光滑的旋转木马，当有人点击幻灯片时，它会弹出（整个旋转木马及其功能）。问题是，目前，弹出式旋转木马由图像组成，我需要它来制作视频（iframe）。您知道如何更改iframe而不是链接（a href）？

这是我的代码：

HTML：

<section class="center slider">
    <div class="single">
      <a href="http://placehold.it/350x300?text=1">
        <img src="http://placehold.it/350x300?text=1">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=2">
      <img src="http://placehold.it/350x300?text=2">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=3">
      <img src="http://placehold.it/350x300?text=3">
      </a>
    </div>
    <div class="single">
      <a href="http://placehold.it/350x300?text=4">
      <img src="http://placehold.it/350x300?text=4">
      </a>
    </div>
</section>

CSS：

 .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }

    .slick-slide {
  opacity: 0.5;
}

.slick-current {
  opacity: 1;
}

JS：

$(document).on('ready', function() {
      $('.center').slick ({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        mobileFirst: true
      });



      $('.center').slickLightbox({
        slick: {
          itemSelector: 'a',
          navigateByKeyboard: true,
          dots: true,
          infinite: true,
          centerMode: true,
          slidesToShow: 3,
          slidesToScroll: 1,
          mobileFirst: true
        }
      });




    });

外部链接：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>


<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">

光滑的轮播弹出 - 使用iframe而不是链接（a）

0 个答案: