Use bullets as navigation with Swipe JS

Question

I've been banging my head off a wall for a few hours and I'd really appreciate some help with this. I know it's going to be easy solution but so far it's not going well.

I'm using Swipe Js for a slider and I want to use some bullets as navigation (without the next and prev). I tried to use getPos() a built in swipe function but I keep getting a 'no method' error in my console.

Here's my HTML:

<section id='slider' class='swipe full-width'>
      <div class='swipe-wrap'>

        <div class="slide">
          <!-- content -->
        </div>

        <div class="slide">
          <!-- content -->
        </div>
 </div>
</section>

 <div class="counter">
      <ul id='position'>
          <li class="on"></li>
          <li></li>
          <li></li>
       </ul>
 </div>

Here's my JS: I've pulled it back to what's working. I just want to click on a dot and make it go to the corresponding slide.

   var slider = Swipe(document.getElementById('slider'), {
      auto: 6000,
      continuous: true,
      callback: function(pos) {

        var i = bullets.length;
        while (i--) {
          bullets[i].className = ' ';
        }
          bullets[pos].className = 'on';
      }

    });

  var bullets = document.getElementById('position').getElementsByTagName('li');

Any help is really appreciated

Link to my code http://codepen.io/veryrobert/pen/sHjwo

Link to the plugin https://github.com/bradbirdsall/Swipe

score 0 · Accepted Answer · answered Mar 11 '14 at 14:17

0

This should work:

$('li').on('click', function(event){
  event.preventDefault();
  var index = $("li").index(event.currentTarget);
  slider.slide(index);
});

Basically, you need to workout the index of corresponding li and pass that to swipes .slide method. This will then slide to the requested slide.

Hope that helps.

answered Mar 11 '14 at 14:17

Gary Stevens

693
8
20

Perfect, thanks very much for the help. I really really appreciate it. Here's an updated pen if anyone else needs it. http://codepen.io/veryrobert/pen/sHjwo – veryrobert Mar 11 '14 at 15:07
One issue I just notice is that now the timer is messed up, would there be a way to reset it? or should I add this into the callback? – veryrobert Mar 11 '14 at 15:23
The 'auto' stops working after the user interacts with it. I can't find anything in the docs that mentions how to restart it I'm afraid. – Gary Stevens Mar 11 '14 at 17:56
No worries Gary, I think I might move away from swipe js in this particular case and use something that has the built in functionality I need. Really appreciate your time and help on this. Thanks again. – veryrobert Mar 12 '14 at 09:55
1

Good idea, find one that works best for you instead of hacking it. Happy to help. I've not really used many others as I really how swipe feels on a touch device. Good luck! – Gary Stevens Mar 12 '14 at 10:05

score 0 · Answer 2 · edited Jan 07 '22 at 11:00

To make bullets clickable, you can use the plugin's pagination module and initialise it as follows:

<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<div class="swiper-pagination"></div>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    // Default parameters
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>

In this way, swiper takes care of creating the bullets inside the element that is given as a parameter and set clickable: true

Remember to include/import the paging module with Swiper or include/import the Swipern bundle for navigation to work:

From NPM:

// core version + pagination module:
import Swiper, { Pagination } from 'swiper';

// configure Swiper to use module
Swiper.use([Pagination]);

// init Swiper:
const swiper = new Swiper(...);

From CDN:

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Use bullets as navigation with Swipe JS

2 Answers2

Linked