title: How to make dot-navigation on a swipe list
body: <p>I have made a swipe list with a dot-navigation. When the user clicks on a dot, the specific image gets displayed and the dot becomes an active class to indicate which image is currently displayed. </p>
  
  <p>So far it works fine. Then I added the <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin" rel="nofollow">TouchSwipe</a> plugin and this also works fine, except that the <code>dot-menu</code> doesn't work and I'm not really sure how to solve that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('ul li').each(function (i) {
    $('ol').append('&lt;li&gt;');
    $('ol li:first-child').addClass('slide-item-active');
  });
  
  $('ol li').bind('click', function(){
    $('ol li').removeClass('slide-item-active');
  
    var index = $(this).index() + 1;
  
    $(this).addClass('slide-item-active')
    $(".active").hide();
  
    $("#slide-item_" + index).show();        
    $(".slide-item").removeClass("active");
    $("#slide-item_" + index).addClass("active");
  }); 
  
  function nextSlide(){
    var idx = $('.active').index();
    var ele = $('li').eq(idx).removeClass('active');
    var nxt = $(ele).next().addClass('active');
    if ($(nxt).length &lt; 1) {
      var firstSlide = $('ul li')[0];
      $(firstSlide).addClass('active')
    }
  }
  
  function prevSlide() {
    var idx = $('.active').index();
    var ele = $('li').eq(idx).removeClass('active');
    var prev = $(ele).prev().addClass('active');
    if ($(prev).length &lt; 1) {
      var firstSlide = $('ul li')[0];
      $(firstSlide).removeClass('active');
      $('ul li').last().addClass('active');
    }  
  }
  
  $("ul li").swipe({
    swipeLeft:function(event) {
      prevSlide()
    },
    swipeRight:function(event) {
      nextSlide();
    },
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider-container ul {
    list-style: none;
  }
  
  .slide-item {
    top:0;
    width: 100%;
    display:none;  
  }
  
  .slide-item-imgwrap {
    height: 270px;
    width: 400px;
    overflow: hidden;
  }
  
  .active {
    display: block;
  }
  
  ol{
    list-style: none;
    width:100%;
  }
  ol li{
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    width:20px;
    height:20px;
    cursor: pointer;
  } 
  .slide-item-active {
    background: #036;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.15/jquery.touchSwipe.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="slider-container"&gt;
    &lt;ul&gt;
      &lt;li id="slide-item_1" class="slide-item active" data-id="1"&gt;
        &lt;div class="slide-item-imgwrap"&gt;
          &lt;img src="http://www.grindtv.com/wp-content/uploads/2011/10/faroe-islands.jpg" width="100%"/&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="slide-item_2" class="slide-item" data-id="2"&gt;
        &lt;div class="slide-item-imgwrap"&gt;
          &lt;img src="http://cruisingoutpost.com/wp-content/uploads/2013/06/IAT-Europe-Faroe-Islands.jpg" width="100%"/&gt;
        &lt;/div&gt;
      &lt;/li&gt; 
      &lt;li id="slide-item_3" class="slide-item" data-id="3"&gt;
        &lt;div class="slide-item-imgwrap"&gt;
          &lt;img src="http://i.imgur.com/PIujv.jpg" width="100%"/&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="slide-item_4" class="slide-item" data-id="4"&gt;
        &lt;div class="slide-item-imgwrap"&gt;
          &lt;img src="http://www.icelandholidays.com/images/resorts/Locat-148-faroe.jpg" width="100%"/&gt;
        &lt;/div&gt;
      &lt;/li&gt;  
    &lt;/ul&gt;
    &lt;ol&gt;&lt;/ol&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/9zg476ja/" rel="nofollow">JSFiddle DEMO</a></p>
  
  <p>So, any suggestions maybe?</p>