5

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>
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! Dec 5, 2014 at 0:31

2 Answers 2

6

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

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?
    – caramba
    Sep 10, 2013 at 10:57
  • @caramba - 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. :-) Sep 10, 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)
    – caramba
    Sep 10, 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." ?
    – caramba
    Sep 11, 2013 at 13:18
  • @caramba - 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) Sep 11, 2013 at 14:58
4
+25

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

4
  • thank you, haven't seen that before! maybe i'll find a solution. much appreciated
    – caramba
    Sep 13, 2013 at 12:36
  • Tell me if you don't ill go ahead exploring :)
    – Anobik
    Sep 14, 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.
    – caramba
    Sep 25, 2013 at 15:31
  • try some work around . If the slide function is accessible then try remove those class . :)
    – Anobik
    Sep 25, 2013 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.