0

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.

So far it works fine. Then I added the TouchSwipe plugin and this also works fine, except that the dot-menu doesn't work and I'm not really sure how to solve that.

$('ul li').each(function (i) {
  $('ol').append('<li>');
  $('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 < 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 < 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();
  },
});
.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>

JSFiddle DEMO

So, any suggestions maybe?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
ST80
  • 3,565
  • 16
  • 64
  • 124

1 Answers1

1

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>
Lin Yuan
  • 528
  • 2
  • 12