Question

使用的滑块：http://www.idangero.us/swiper/

现场演示我尝试的内容：http://mhdtaki.com/lab/mobile/mobile.html

我已经实现了滑动图库，设置为仅通过媒体查询显示在移动大小的屏幕上。关键是在较小的视口上查看时，将桌面网格库替换为coverflow移动版。调整演示页面的大小将显示coverflow库成功显示，我想知道如何使图像可以点击外部链接，类似于较大的网格响应点击的方式。我尝试用一个元素包装单个div，但这只会打破画廊。

    <!--MOBILE GALLERY FOR VIEW -->
  <section id="mobilegallery">
                    <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(images/imperialthumb.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/lezem.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/pups.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/kanafani.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/unvield.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/baz.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/rana.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/chairs.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/brosh.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(images/bros.jpg)"></div>
    </div>
    <!-- Add Pagination -->
</div>
    </section>
            <!--END MOBILE GALLERY FOR VIEW -->

我尝试的例子：

 <div class="swiper-wrapper">
            <a href="www.google.com"><div class="swiper-slide" style="background-image:url(images/imperialthumb.jpg)"></div></a>
        </div>

Answer 1

试试这个

<div class="swiper-wrapper">
  <a class="swiper-slide" style="background-image:url(images/imperialthumb.jpg)" href="www.google.com"></a>
</div>

也许你需要添加

.swiper-slide {
  display: inline-block;
}

或者

.swiper-slide {
  display: block;
}

如何使swiper.js图像可点击？

1 个答案: