JSFiddle - React, Tailwind, and code Playground

by rafmaz

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://codyhouse.co/demo/pointy-slider/css/style.css">
<div class="cd-slider-wrapper">
  <ul class="cd-slider">
    <li class="is-visible covered">
      <div class="cd-half-block image"></div>
      <div class="cd-half-block content">
        <div>
          <h2>Slide Number 1</h2>
          <p>
            PIPPO PLUTO E PAPERINO
          </p>
        </div>
      </div>
    </li>
    <!-- .cd-half-block.content -->
    <li>
      <div class="cd-half-block image"></div>
      <div class="cd-half-block content">
        <div>
          <h2>Slide Number 2</h2>
          <p>
							Lorem ipsum dolor sit amet, consectetur ad…
            <!-- content here -->
          </p>
        </div>
      </div>
      <!-- item content here -->
    </li>
    <!-- .cd-half-block.content -->
    <li>
      <div class="cd-half-block image"></div>
      <div class="cd-half-block content">
        <div>
          <h2>Slide Number 3</h2>
          <p>
							Lorem ipsum dolor sit amet, consectetur ad…
            <!-- content here -->
          </p>
        </div>
      </div>
      <!-- item content here -->
    </li>

    <!-- addition list items here -->
  </ul>
  <!-- .cd-slider -->

  <!-- The ol.cd-slider-navigation element is created using jQuery and inserted here-->
</div>
<!-- .cd-slider-wrapper -->

CSS

.cd-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.cd-slider li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
  transition: transform 0.6s;
}

.cd-slider li.is-visible {
  transform: translateX(0);
}

@media only screen and (min-width: 900px) {
  .cd-slider li {
    transform: translateX(0);
  }
  .cd-slider .cd-half-block {
    height: 100%;
    width: 50%;
    float: right;
  }
  .cd-slider .cd-half-block.content {
    transform: translateX(200%);
    transition: transform 0.6s 0s ease-in-out;
  }
  .cd-slider .cd-half-block.image {
    transform: translateX(100%);
    transition: transform 0s 0.3s;
  }
  .cd-slider li.is-visible .cd-half-block.content,
  .cd-slider li.is-visible .cd-half-block.image {
    transform: translateX(0%);
  }
  .cd-slider li.is-visible .cd-half-block.content {
    transition: transform 0.6s 0s ease-in-out;
  }
}

JavaScript

jQuery(document).ready(function($){
	var sliderContainers = $('.cd-slider-wrapper');

	if( sliderContainers.length > 0 ) initBlockSlider(sliderContainers);

	function initBlockSlider(sliderContainers) {
		sliderContainers.each(function(){
			var sliderContainer = $(this),
				slides = sliderContainer.children('.cd-slider').children('li'),
				sliderPagination = createSliderPagination(sliderContainer);

			sliderPagination.on('click', function(event){
				event.preventDefault();
				var selected = $(this),
					index = selected.index();
				updateSlider(index, sliderPagination, slides);
			});

			sliderContainer.on('swipeleft', function(){
				var bool = enableSwipe(sliderContainer),
					visibleSlide = sliderContainer.find('.is-visible').last(),
					visibleSlideIndex = visibleSlide.index();
				if(!visibleSlide.is(':last-child') && bool) {updateSlider(visibleSlideIndex + 1, sliderPagination, slides);}
			});

			sliderContainer.on('swiperight', function(){
				var bool = enableSwipe(sliderContainer),
					visibleSlide = sliderContainer.find('.is-visible').last(),
					visibleSlideIndex = visibleSlide.index();
				if(!visibleSlide.is(':first-child') && bool) {updateSlider(visibleSlideIndex - 1, sliderPagination, slides);}
			});
		});
	}

	function createSliderPagination(container){
		var wrapper = $('<ol class="cd-slider-navigation"></ol>');
		container.children('.cd-slider').find('li').each(function(index){
			var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
				dot = $('<a href="#0"></a>').appendTo(dotWrapper);
			dotWrapper.appendTo(wrapper);
			var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
			dot.text(dotText);
		});
		wrapper.appendTo(container)
		return wrapper.children('li');
	}

	function updateSlider(n, navigation, slides) {
		navigation.removeClass('selected').eq(n).addClass('selected');
		slides.eq(n).addClass('is-visible').removeClass('covered').prevAll('li').addClass('is-visible...