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

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 图片可点击？

How to make swiper.js images clickable?

html

external

slider