manga slider 1

by Noir Noir

HTML

<div class="book">
  <div class="slides">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
  </div>
  <button class="prev"></button>
  <button class="next"></button>
</div>

SCSS

.book {
  position: relative;
  width: 320px;
  height: 480px;
  overflow: hidden;
  
  .slides {
    position: relative;
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    transition: left 0.2s ease;
    
    .slide {
      display: inline-block;
      width: 100%;
      height: 100%;
      
      &.slide-1 {
        background: #f8f;
      }
      &.slide-2 {
        background: #8ff;
      }
      &.slide-3 {
        background: #ff8;
      }
    }
  }
  
  button {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: none;
    border: 0;
    outline: none;
    
    &.prev {
      left: 0;
    }
    
    &.next {
      right: 0;
    }
  }
}

JavaScript

$(document).on('click', '.book .next', function(){
	slideNext($(this).closest('.book'));
});

$(document).on('click', '.book .prev', function(){
	slidePrev($(this).closest('.book'));
});

function slideNext(book) {
	var active = getActiveSlide(book);
  slideTo(active.nextAll('.slide').first());
}

function slidePrev(book) {
	var active = getActiveSlide(book);
  slideTo(active.prevAll('.slide').first());
}

function getActiveSlide(book) {
	var active = $('.slide.active', book);
  if (active.length) {
  	return active;
  }
  
  return $('.slide', book).first();
}

function slideTo(slide) {
	if (!slide.length) {
  	return false;
  }
  
  var slides = slide.closest('.slides');
 	slides.css('left', 0 - slide.position().left);
  
  $('.slide', slides).removeClass('active');
  slide.addClass('active');
}