LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  height: 100%;
  width: 100%;
  margin: 0;
  position: absolute;
  display: table;
  margin: 0;
}

.slider-container,
.wrapper {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  height: 500px;
}

.wrapper {
  margin: 0 auto;
}

.slider-container div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  z-index: 0;
}

.slider-container div:first-child {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

.slider-container div:nth-of-type(1) {
  background-color: #f06868;
}

.slider-container div:nth-of-type(2) {
  background-color: #fab57a;
}

.slider-container div:nth-of-type(3) {
  background-color: #80d6ff;
}

.slider-container div:nth-of-type(4) {
  background-color: #83B764;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  z-index: 20;
  cursor: pointer;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.prev:hover,
.next:hover {
  opacity: 1;
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

:focus {
  outline: none;
}

.ui-mobile-viewport h1 {
  display: none;
}

.ui-page {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  min-height: 500px !important;
}
JS
var toIndex = 0,
  fromIndex = 0,
  items = $('.slider-container div'),
  itemAmt = items.length - 1;

function toNext() {

  var item = items.eq(toIndex);
  item.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(0%)',
    'z-index': '1'
  });

  if (toIndex == 0) {
    fromIndex = itemAmt;
  } else {
    fromIndex = toIndex - 1;
  }

  var fromItem = items.eq(fromIndex);
  fromItem.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(-100%)',
    'z-index': '-1'
  });

}

function toPrev() {
  if (toIndex == itemAmt) {
    fromIndex = 0;
  } else {
    fromIndex = toIndex + 1;
  }

  var fromItem = items.eq(fromIndex);
  fromItem.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(-100%)',
    'z-index': '-1'
  });

  var item = items.eq(toIndex);
  item.css({
    'transition': 'transform 0.4s ease',
    'transform': 'translateX(0%)',
    'z-index': '1'
  });
}

var autoSlide = setInterval(function() {
  toIndex += 1;
  if (toIndex > itemAmt) {
    toIndex = 0;
  }
  toNext();
}, 3000);

function nextClick() {
  clearInterval(autoSlide);
  toIndex += 1;
  if (toIndex > itemAmt) {
    toIndex = 0;
  }
  toNext();
}

function prevClick() {
  clearInterval(autoSlide);
  toIndex -= 1;
  if (toIndex < 0) {
    toIndex = itemAmt;
  }
  toPrev();
}

$('.next').click(nextClick);

$('.prev').click(prevClick);

$('.slider-container div').on('swiperight', nextClick);
$('.slider-container div').on('swipeleft', prevClick);
Host Instantly Drag and Drop Website Builder

 

Description

Simple mobile friendly with swipe gesture jQuery slider with CSS3 transition.
Term
Mon, 11/27/2017 - 22:08

Related Codes

Pen ID
Pen ID
Pen ID