Menu
Using idangerous swiper, see the Slide1 lets go to google. If that Slide1 is at the original position (first left in box) the link to google will always work. But if we swipe (or mouse drag and drop left and right) and Slide1 is at position 2 or 3, the click won't work.
http://jsfiddle.net/C8ytu/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css">
<style>
/* Demo Styles */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}
.swiper-container {
width: 660px;
height: 250px;
color: #fff;
text-align: center;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #973e76;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title"><a href="http://www.google.com" target="_blank">lets go to google</a></div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 3,
loop: true
})
</script>
</body>
</html>
208
You have to add loopAdditionalSlides:3 in you code and that solve your problem.
See here the JSFiddle
JS:
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loopAdditionalSlides:3, //<-- This one
paginationClickable: true,
slidesPerView: 3,
loop: true
});
loopAdditionalSlides: "Addition number of slides that will be cloned after creating of loop"
Documentation: Swiper Usage and API
54
So it seems on Sliding Right the Tag is not getting clicked. I am just Helping you out in this. Take a look at the screen shots one before swiping and the other after swiping
I changeed in some code and fire bugged it. It seems that your js file is adding a kind of click on the parent div
<div class="swiper-slide orange-slide swiper-slide-visible swiper-slide-active" style="width: 165px; height: 250px;">
<div class="title">Slide 8<br><a href="http://www.google.com" target="_blank">lets go to google</a></div>
</div>
where it is adding extra classes on the parent div
swiper-slide-visible swiper-slide-active
but the same on sliding left is not adding any class any where. it keeps the default classes
swiper-slide orange-slide
Check the JS ... I can only direct you :) If you wish then ill go for a work around but if you can edit the js for a click then please do. Tell me if this does not solve your problem :)
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
