Diagonal Infinite Slider With jQuery And CSS3

A pretty cool diagonal infinite-looping Slider built using jQuery and CSS3 that automatically downgrades into a normal horizontal slider on small screens.

How to use it:

1. Add slide titles, images, text and navigation arrows to the slider following the markup structure like this:

<div class="slider">
  <div class="slider__title">
    <h4>Slider Title</h4>
  </div>
  <div class="controls">
    <button class="previous">
        <svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="0 0 67.9 105.6" style="enable-background:new 0 0 67.9 105.6;" xml:space="preserve">
          <rect x="4.4" y="4.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.2476 15.0829)" width="21.3" height="21.3"/>
          <rect x="23.3" y="23.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.0571 33.9364)" width="21.3" height="21.3"/>
          <rect x="42.1" y="42.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.8666 52.7902)" width="21.3" height="21.3"/>
          <rect x="23.3" y="61" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.7202 44.9807)" width="21.3" height="21.3"/>
          <rect x="4.4" y="79.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.5738 37.1712)" width="21.3" height="21.3"/>
        </svg>
      </button>
    <button class="next">
        <svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="0 0 67.9 105.6" style="enable-background:new 0 0 67.9 105.6;" xml:space="preserve">
          <rect x="4.4" y="4.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.2476 15.0829)" width="21.3" height="21.3"/>
          <rect x="23.3" y="23.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.0571 33.9364)" width="21.3" height="21.3"/>
          <rect x="42.1" y="42.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.8666 52.7902)" width="21.3" height="21.3"/>
          <rect x="23.3" y="61" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -40.7202 44.9807)" width="21.3" height="21.3"/>
          <rect x="4.4" y="79.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -59.5738 37.1712)" width="21.3" height="21.3"/>
        </svg>
      <button>
    </div>
    <div class="slider__inner">
        <div class="slider__slide">
          <a class="slider__slide__image" href="#" style="background-image:url(1.jpeg)"></a>
          <div class="slider__slide__content" data-background="#c84977" style="background-color:#c84977;">
            Content 1
          </div>
        </div>
      <div class="slider__slide">
          <a class="slider__slide__image" href="#" style="background-image:url(2.jpeg)"></a>
          <div class="slider__slide__content" data-background="#db5944" style="background-color:#db5944;">
            Content 2
          </div>
        </div>
      <div class="slider__slide">
          <a class="slider__slide__image" href="#" style="background-image:url(3.jpeg)"></a>
          <div class="slider__slide__content" data-background="#e2c142" style="background-color:#e2c142;">
            Content 3
          </div>
        </div>
       <div class="slider__slide">
          <a class="slider__slide__image" href="#" style="background-image:url(4.jpeg)"></a>
          <div class="slider__slide__content" data-background="#43cab1" style="background-color:#43cab1;">
            Content 4
          </div>
        </div>
        ...
    </div>
</div>

2. The primary CSS/CSS3 rules for the slider.

.slider {
  min-height: 300px;
  overflow: hidden;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  font-family: "roboto", sans-serif;
  background-color: #da84a3;
}

.slider__title {
  background: #2d2d2d;
  color: #fff;
  position: absolute;
  z-index: 9999;
  left: calc(25% + 150px);
  padding: 10px;
  text-transform: uppercase;
  font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
}

@media (max-width: 767px) {

.slider__title { left: 0; }

}

.slider__title h4 { margin: 0; }

.slider__inner {
  width: calc(75% + 150px);
  max-width: 100%;
  margin: auto;
  position: relative;
  min-height: 300px;
  overflow: hidden;
  float: right;
}

@media (max-width: 767px) {

.slider__inner { width: 100%; }

}

.slider__slide {
  min-height: 300px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translate(-300px, 100%);
  transform: translate(-300px, 100%);
}

@media (max-width: 767px) {

.slider__slide {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

}

.slider__slide__image {
  position: absolute;
  left: 150px;
  bottom: 0;
  height: 150px;
  width: 150px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 767px) {

.slider__slide__image { display: none; }

}

.slider__slide__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: absolute;
  padding: 55px 80px 30px 30px;
  right: 0;
  top: 0;
  bottom: 0;
  left: 300px;
}

@media (min-width: 768px) {

.slider__slide__content {
  right: -360px;
  padding-right: 440px;
}

}

@media (max-width: 767px) {

.slider__slide__content {
  padding: 55px 60px 30px;
  left: 0;
  background-color: transparent !important;
}

}

.slider__slide__content h3 { margin: 0; }

.slider__slide__content p {
  margin: 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9em;
  max-width: 600px;
}

.slider__slide__content__categories {
  padding: 10px 0;
  font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}

.slider__slide__content__categories a {
  color: #2d2d2d;
  text-decoration: none;
}

.slider__slide__content__categories a:hover {
  text-decoration: underline;
  color: #fff;
}

.slider__slide--animate {
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
}

.slider__slide--active {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.slider__slide--active ~ .slider__slide {
  -webkit-transform: translate(300px, -100%);
  transform: translate(300px, -100%);
}

@media (max-width: 767px) {

.slider__slide--active ~ .slider__slide {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

}

a.read-more {
  background: #2d2d2d;
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  font-family: "din-2014-narrow", "Arial Narrow", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin-top: 10px;
  text-decoration: none;
}

a.read-more img { max-height: 11px; }

3. Style the SVG based navigation controls.

.slider .controls {
  position: absolute;
  z-index: 9999;
  right: 0;
  top: 20px;
  height: 260px;
}

@media (max-width: 767px) {

.slider .controls {
  width: 100%;
  height: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

}

.slider .controls button {
  background: transparent;
  border: none;
  display: block;
  width: 20px;
  position: absolute;
  padding: 0;
  outline: none;
  cursor: pointer;
}

.slider .controls button.previous {
  top: 0;
  right: 25px;
}

@media (min-width: 768px) {

.slider .controls button.previous {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

}

@media (min-width: 768px) {

.slider .controls button.next {
  top: 20px;
  right: 50px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

}

@media (max-width: 767px) {

.slider .controls button.next {
  top: 0;
  left: 20px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

}

.slider .controls button rect { fill: #2d2d2d; }

.slider .controls button:hover rect { fill: #fff; }

4. Load the necessary JQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 

5. Load the TinyColor library for the color transitions when you switch between slides.

<script src="tinycolor.js"></script> 

6. The main JavaScript to active the slider.

function duplicateSlides(slider, slides) {
  if (slides.length < 3) {
      slider.append(slider.html());
      var slidesRecount = jQuery('.slider .slider__slide');
      duplicateSlides(slider, slidesRecount);
  } else {
      slides.removeClass('slider__slide--active');
      jQuery(slides[0]).addClass('slider__slide--active');
  }
}
jQuery(document).ready(function () {
  var $sliderContainers = jQuery('.slider');
  var $body = jQuery('body');
  $sliderContainers.each(function () {
      var $sliderContainer = jQuery(this);
      var $sliderInner = $sliderContainer.find('.slider__inner');
      var $slides = $sliderContainer.find('.slider__slide');
      duplicateSlides($sliderInner, $slides);
      var bg = $sliderContainer.find('.slider__slide--active').children('.slider__slide__content').data('background');
      var lightenBy = 15;
      var lighten = tinycolor(bg).lighten(lightenBy).toString();
      var lightenDouble = tinycolor(bg).lighten(lightenBy * 2).toString();
      $sliderContainer.css('background-color', lighten);
      $body.css('background-color', lightenDouble);
      var $first = $slides.filter(':first');
      var $last = $slides.filter(':last');
      $first.before($last);
      $sliderContainer.on('click', '.controls button', function () {
          $slides.addClass('slider__slide--animate');
          var $clicked = jQuery(this);
          var $activeSlide = $sliderContainer.find('.slider__slide--active');
          $first = $sliderContainer.find('.slider__slide:first');
          $last = $sliderContainer.find('.slider__slide:last');
          if ($clicked.hasClass('next')) {
              var nextBg = jQuery('.slider__slide--active').next().children('.slider__slide__content').data('background');
              var nextLighten = tinycolor(nextBg).lighten(lightenBy).toString();
              var nextLightenDouble = tinycolor(nextBg).lighten(lightenBy * 2).toString();
              $sliderContainer.css('background-color', nextLighten);
              $body.css('background-color', nextLightenDouble);
              $activeSlide.removeClass('slider__slide--active').next().addClass('slider__slide--active');
              $last.after($first);
          } else if ($clicked.hasClass('previous')) {
              var prevBg = jQuery('.slider__slide--active').prev().children('.slider__slide__content').data('background');
              var prevLighten = tinycolor(prevBg).lighten(lightenBy).toString();
              var prevLightenDouble = tinycolor(prevBg).lighten(lightenBy * 2).toString();
              $sliderContainer.css('background-color', prevLighten);
              $body.css('background-color', prevLightenDouble);
              $activeSlide.removeClass('slider__slide--active').prev().addClass('slider__slide--active');
              $first.before($last);
          }
      });
      $(window).resize(function () {
          $slides.removeClass('slider__slide--animate');
      });
  });
});

---

This awesome jQuery plugin is developed by nickmoreton. For more Advanced Usages, please check the demo page or visit the official website.