使用的滑块：http : //www.idangero.us/swiper/
我正在尝试的实时演示：http : //mhdtaki.com/lab/mobile/mobile.html
我已经实现了滑动图库，设置为仅通过mediaquery在移动尺寸的屏幕上显示。关键是要在较小的视口上查看时将桌面网格库替换为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>
试试这个
<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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句