score:1

Accepted answer

The problem is swipe didn't change the dot class so they won't change.

I would suggest you to merge similar function to one to make sure they worked as expect.

So I add another function showSlide(index) for click and swipe event to do.(their diff is click only need to show current but swipe need to show either previous or next)

check up these code and hope it helped!

$('ul li').each(function(i) {
  $('ol').append('<li>');
  $('ol li:first-child').addClass('slide-item-active');
});

$('ol li').bind('click', function() {
  var index = $(this).index() + 1;
  showSlide(index);
});

function nextSlide() {
  var currentIndex = $('.active').index() + 1;
  showSlide(currentIndex + 1);
}

function prevSlide() {
  var currentIndex = $('.active').index() + 1;
  showSlide(currentIndex - 1);
}

function showSlide(index) {
  var slideId = "slide-item_" + index;
  var $showSilde = $("#" + slideId);
  var $activeSlide = $(".active");
  $activeSlide.hide();
  $activeSlide.removeClass("active");

  $showSilde.addClass("active");
  $showSilde.show();

  $('.slide-item-active').removeClass('slide-item-active');
  $('ol li').eq(index - 1).addClass('slide-item-active');
}

$("ul li").swipe({
  swipeLeft: function(event) {
    prevSlide();
  },
  swipeRight: function(event) {
    nextSlide();
  }
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.15/jquery.touchSwipe.min.js"></script>

<div class="slider-container">
  <ul>
    <li id="slide-item_1" class="slide-item active" data-id="1">
      <div class="slide-item-imgwrap">
        <img src="http://www.grindtv.com/wp-content/uploads/2011/10/faroe-islands.jpg" width="100%" />
      </div>
    </li>
    <li id="slide-item_2" class="slide-item" data-id="2">
      <div class="slide-item-imgwrap">
        <img src="http://cruisingoutpost.com/wp-content/uploads/2013/06/IAT-Europe-Faroe-Islands.jpg" width="100%" />
      </div>
    </li>
    <li id="slide-item_3" class="slide-item" data-id="3">
      <div class="slide-item-imgwrap">
        <img src="http://i.imgur.com/PIujv.jpg" width="100%" />
      </div>
    </li>
    <li id="slide-item_4" class="slide-item" data-id="4">
      <div class="slide-item-imgwrap">
        <img src="http://www.icelandholidays.com/images/resorts/Locat-148-faroe.jpg" width="100%" />
      </div>
    </li>
  </ul>
  <ol></ol>
</div>


Related Query

More Query from same tag