MFathurrohmanMauludin/draggable-touch-friendly-slider-carousel.markdown

## draggable-touch-friendly-slider-carousel.markdown

      
    Raw
  

              draggable-touch-friendly-slider-carousel.markdown
            
          
    Draggable & Touch-friendly Slider Carousel

A Pen by M Fathurrohman Mauludin on CodePen.
License.

  
## index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Draggable & Touch-friendly Slider Example</title>

<link href="https://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">

      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <div id="slider" class="slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="slide">Slide 1</span>
      <span class="slide">Slide 2</span>
      <span class="slide">Slide 3</span>
      <span class="slide">Slide 4</span>
      <span class="slide">Slide 5</span>
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>
</body>

</html>

## script.js
var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('items'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

slide(slider, sliderItems, prev, next);

function slide(wrapper, items, prev, next) {
  var posX1 = 0,
      posX2 = 0,
      posInitial,
      posFinal,
      threshold = 100,
      slides = items.getElementsByClassName('slide'),
      slidesLength = slides.length,
      slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
      firstSlide = slides[0],
      lastSlide = slides[slidesLength - 1],
      cloneFirst = firstSlide.cloneNode(true),
      cloneLast = lastSlide.cloneNode(true),
      index = 0,
      allowShift = true;

  // Clone first and last slide
  items.appendChild(cloneFirst);
  items.insertBefore(cloneLast, firstSlide);
  wrapper.classList.add('loaded');

  // Mouse and Touch events
  items.onmousedown = dragStart;

  // Touch events
  items.addEventListener('touchstart', dragStart);
  items.addEventListener('touchend', dragEnd);
  items.addEventListener('touchmove', dragAction);

  // Click events
  prev.addEventListener('click', function () { shiftSlide(-1) });
  next.addEventListener('click', function () { shiftSlide(1) });

  // Transition events
  items.addEventListener('transitionend', checkIndex);

  function dragStart (e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = items.offsetLeft;

    if (e.type == 'touchstart') {
      posX1 = e.touches[0].clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction (e) {
    e = e || window.event;

    if (e.type == 'touchmove') {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    items.style.left = (items.offsetLeft - posX2) + "px";
  }

  function dragEnd (e) {
    posFinal = items.offsetLeft;
    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, 'drag');
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, 'drag');
    } else {
      items.style.left = (posInitial) + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }

  function shiftSlide(dir, action) {
    items.classList.add('shifting');

    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;
      }
    };

    allowShift = false;
  }

  function checkIndex (){
    items.classList.remove('shifting');

    if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }

    allowShift = true;
  }
}

## style.css
@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
  box-sizing: border-box;
}

body {
  height: 100%;
  background: #efefef;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 18px;
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.wrapper {
  overflow: hidden;
  position: relative;
  background: #222;
  z-index: 1;
}

#items {
  width: 10000px;
  position: relative;
  top: 0;
  left: -400px;
}

#items.shifting {
  transition: left .2s ease-out;
}

.slide {
  width: 400px;
  height: 300px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: #FFCF47;
}

.slider.loaded .slide:nth-child(2),
.slider.loaded .slide:nth-child(7) {
  background: #FFCF47;
}
.slider.loaded .slide:nth-child(1),
.slider.loaded .slide:nth-child(6) {
  background: #7ADCEF;
}
.slider.loaded .slide:nth-child(3) {
  background: #F97C68;
}
.slider.loaded .slide:nth-child(4) {
  background: #a78df5;
}
.slider.loaded .slide:nth-child(5) {
  background: #ff8686;
}

.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
  left: -20px;
}

.next {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Draggable & Touch-friendly Slider Example</title>

	<link href="https://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">

	<link rel="stylesheet" href="css/style.css">


	</head>

	<body>
	<div id="slider" class="slider">
	<div class="wrapper">
	<div id="items" class="items">
	<span class="slide">Slide 1</span>
	<span class="slide">Slide 2</span>
	<span class="slide">Slide 3</span>
	<span class="slide">Slide 4</span>
	<span class="slide">Slide 5</span>
	</div>
	</div>
	<a id="prev" class="control prev"></a>
	<a id="next" class="control next"></a>
	</div>
	</body>

	</html>
	var slider = document.getElementById('slider'),
	sliderItems = document.getElementById('items'),
	prev = document.getElementById('prev'),
	next = document.getElementById('next');

	slide(slider, sliderItems, prev, next);

	function slide(wrapper, items, prev, next) {
	var posX1 = 0,
	posX2 = 0,
	posInitial,
	posFinal,
	threshold = 100,
	slides = items.getElementsByClassName('slide'),
	slidesLength = slides.length,
	slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
	firstSlide = slides[0],
	lastSlide = slides[slidesLength - 1],
	cloneFirst = firstSlide.cloneNode(true),
	cloneLast = lastSlide.cloneNode(true),
	index = 0,
	allowShift = true;

	// Clone first and last slide
	items.appendChild(cloneFirst);
	items.insertBefore(cloneLast, firstSlide);
	wrapper.classList.add('loaded');

	// Mouse and Touch events
	items.onmousedown = dragStart;

	// Touch events
	items.addEventListener('touchstart', dragStart);
	items.addEventListener('touchend', dragEnd);
	items.addEventListener('touchmove', dragAction);

	// Click events
	prev.addEventListener('click', function () { shiftSlide(-1) });
	next.addEventListener('click', function () { shiftSlide(1) });

	// Transition events
	items.addEventListener('transitionend', checkIndex);

	function dragStart (e) {
	e = e \|\| window.event;
	e.preventDefault();
	posInitial = items.offsetLeft;

	if (e.type == 'touchstart') {
	posX1 = e.touches[0].clientX;
	} else {
	posX1 = e.clientX;
	document.onmouseup = dragEnd;
	document.onmousemove = dragAction;
	}
	}

	function dragAction (e) {
	e = e \|\| window.event;

	if (e.type == 'touchmove') {
	posX2 = posX1 - e.touches[0].clientX;
	posX1 = e.touches[0].clientX;
	} else {
	posX2 = posX1 - e.clientX;
	posX1 = e.clientX;
	}
	items.style.left = (items.offsetLeft - posX2) + "px";
	}

	function dragEnd (e) {
	posFinal = items.offsetLeft;
	if (posFinal - posInitial < -threshold) {
	shiftSlide(1, 'drag');
	} else if (posFinal - posInitial > threshold) {
	shiftSlide(-1, 'drag');
	} else {
	items.style.left = (posInitial) + "px";
	}

	document.onmouseup = null;
	document.onmousemove = null;
	}

	function shiftSlide(dir, action) {
	items.classList.add('shifting');

	if (allowShift) {
	if (!action) { posInitial = items.offsetLeft; }

	if (dir == 1) {
	items.style.left = (posInitial - slideSize) + "px";
	index++;
	} else if (dir == -1) {
	items.style.left = (posInitial + slideSize) + "px";
	index--;
	}
	};

	allowShift = false;
	}

	function checkIndex (){
	items.classList.remove('shifting');

	if (index == -1) {
	items.style.left = -(slidesLength * slideSize) + "px";
	index = slidesLength - 1;
	}

	if (index == slidesLength) {
	items.style.left = -(1 * slideSize) + "px";
	index = 0;
	}

	allowShift = true;
	}
	}
	@import url("https://fonts.googleapis.com/css?family=Montserrat");
	* {
	box-sizing: border-box;
	}

	body {
	height: 100%;
	background: #efefef;
	color: #333;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.15em;
	font-size: 18px;
	}

	.slider {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 300px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.wrapper {
	overflow: hidden;
	position: relative;
	background: #222;
	z-index: 1;
	}

	#items {
	width: 10000px;
	position: relative;
	top: 0;
	left: -400px;
	}

	#items.shifting {
	transition: left .2s ease-out;
	}

	.slide {
	width: 400px;
	height: 300px;
	cursor: pointer;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 1s;
	position: relative;
	background: #FFCF47;
	}

	.slider.loaded .slide:nth-child(2),
	.slider.loaded .slide:nth-child(7) {
	background: #FFCF47;
	}
	.slider.loaded .slide:nth-child(1),
	.slider.loaded .slide:nth-child(6) {
	background: #7ADCEF;
	}
	.slider.loaded .slide:nth-child(3) {
	background: #F97C68;
	}
	.slider.loaded .slide:nth-child(4) {
	background: #a78df5;
	}
	.slider.loaded .slide:nth-child(5) {
	background: #ff8686;
	}

	.control {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 20px;
	margin-top: -20px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
	z-index: 2;
	}

	.prev,
	.next {
	background-size: 22px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	}

	.prev {
	background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
	left: -20px;
	}

	.next {
	background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
	right: -20px;
	}

	.prev:active,
	.next:active {
	transform: scale(0.8);
	}