我正在尝试触摸滑动条。到目前为止，我已经找到了一个例子，但它并没有重定向链接。它只有照片。我想点击照片将我重定向到特定的url。
我有4个图像，它就像4个不同的页面
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css" rel="stylesheet" /><body >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="http://www.google.com" onclick="return myFunction();">Link</a>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</body>
<script>
function myFunction() {
document.getElementById(".myDiv").style.flexGrow = "5";
}
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script></html>
<style>body {
margin: 0;
padding: 0;
align-content: right
}
.swiper-container {
width: 350px;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide:nth-child(1) {
background-image: url(https://g.hizliresim.com/sari-yaprakli-yol)
}
.swiper-slide:nth-child(2) {
background-image: url(https://picsum.photos/300/300/?image=1050)
}
.swiper-slide:nth-child(3) {
background-image: url(https://picsum.photos/300/300/?image=1039)
}
.swiper-slide:nth-child(4) {
background-image: url(https://picsum.photos/300/300/?image=1019)
}
div.swiper-slide{
text-align: justify;
}
}</style>我已经尝试过用<a href=''>方法和js函数来实现这一点。但它基本上提供了一个我现在想要的链接：(
这样做的选项。。。将div替换为具有a标记的swiper-slide类，为每个类指示其到站点的链接。这并不重要，因为Swiper插件被引用到swiper-slide类。
<div class="swiper-wrapper">
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
</div>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css" rel="stylesheet" /><body >
<div class="swiper-container">
<div class="swiper-wrapper">
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();">
</a>
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
<a class="swiper-slide" href="http://www.google.com" onclick="return myFunction();"></a>
</div>
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</body>
<script>
function myFunction() {
document.getElementById(".myDiv").style.flexGrow = "5";
}
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script></html>
<style>body {
margin: 0;
padding: 0;
align-content: right
}
.swiper-container {
width: 350px;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide:nth-child(1) {
background-image: url(https://g.hizliresim.com/sari-yaprakli-yol)
}
.swiper-slide:nth-child(2) {
background-image: url(https://picsum.photos/300/300/?image=1050)
}
.swiper-slide:nth-child(3) {
background-image: url(https://picsum.photos/300/300/?image=1039)
}
.swiper-slide:nth-child(4) {
background-image: url(https://picsum.photos/300/300/?image=1019)
}
a.swiper-slide{
text-align: justify;
}
}</style>