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

Question

使用的 slider :http://www.idangero.us/swiper/

我正在尝试的实时演示:http://mhdtaki.com/lab/mobile/mobile.html

我已经实现了滑动图库，通过媒体查询设置为仅在移动大小的屏幕上显示。关键是在较小的视口(viewport)上查看时，将桌面网格画廊替换为 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;
}