idangerous swiper link not working when slide is not on original position

Asked 4/9, 2013 at 12:7 Answered 13/9, 2013 at 12:15

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>

Overhasty answered 4/9, 2013 at 12:7 Comment(1)

I didn't use your question and answer at all, but your jsfiddle. It was helpful for me to see how you implemented pagination. Thank you! – Whensoever 5/12, 2014 at 0:31

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

Boniface answered 9/9, 2013 at 16:11 Comment(6)

it works more than half way but still not a 100%. if slide one is at position one: one click on google and tab opens. if slide one is at pos2 or 3, TWO clicks are needed to go to google (only the first time though). any solution for that? – Overhasty 10/9, 2013 at 10:57

@Overhasty - Sorry, I tested this out on latest Chrome, Safari and FF and no problem. I slide one time (with pagination bar or cursor) and its position 2 (with pagination bar) then one click and open tab. I slide with cursor many times and one click and open tab. For me works very fine now. :-) – Boniface 10/9, 2013 at 12:40

you don't have to be sorry, thanks for your time and effort! you are right. Also if I slide with the pagination buttons it works. But if I slide with cursor per drag and drop it needs a double click in all mentioned browsers. (still just for the first click) – Overhasty 10/9, 2013 at 12:50

do you agree with: " if I slide with cursor per drag and drop it needs a double click in all mentioned browsers." ? – Overhasty 11/9, 2013 at 13:18

@Overhasty - Nop :-) If I do: Drag and Drop with cursor for Slide (in all mentioned browsers & and no matter how many times I'm doing that), I click only once and open tap. I dont know why in your browser dont have the same effect.. maybe the cache or whatever...**would be good if someone else would try that code...** ( I tested on iMac and MacBook Pro) – Boniface 11/9, 2013 at 14:58

this is soo strange. we'r aswell working on iMac and MBPros, another guy here has the same problem like me. the five steps to reproduce: (1.) open link jsfiddle.net/C8ytu/14 (2.) click on run (3.) click and drag slide 2 to the right. (now you see slide8,1 & 2) (4.) click on the google link -> nothing happens (5.) click again -> tab opens . sorry but for me this doesn't work – Overhasty 11/9, 2013 at 15:17

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

Swiper before sliding

Swiper after sliding right

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 :)

Triggerfish answered 13/9, 2013 at 12:15 Comment(4)

thank you, haven't seen that before! maybe i'll find a solution. much appreciated – Overhasty 13/9, 2013 at 12:36

Tell me if you don't ill go ahead exploring :) – Triggerfish 14/9, 2013 at 13:54

Sorry I had no time to look back to this earlyer. I haven't changed anything and the click "kind of" works now. it still feels a bit buggy. just have to mention here: if you swipe left id does exactly the same just not to the slide Nr.1 cause that one is not visible than. the three slides in the view always get the "swiper-slide-visible" class added. – Overhasty 25/9, 2013 at 15:31

try some work around . If the slide function is accessible then try remove those class . :) – Triggerfish 25/9, 2013 at 15:32

Recommended topics

Hot tags