12+ jQuery Carousel Examples

This post contains a total of 12+ jQuery Carousel Examples with Source Code. All these Carousels are made using jQuery.

You can use the source code of these examples with credits to the original owner.

Related Posts

jQuery Carousel Examples

1. 3D planets directional slider / carousel

Made by Anya Melnyk. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: #01010f;
}

.container {
  width: 70vw;
  max-width: 300px;
  text-align: center;
  top: 50%;
  left: 50%;
  height: 100vh;
  position: relative;
  perspective: 1000px;
  transform: translate3d(-50%,-50%,600px);
  /* ^^^ 600px for safari hack */
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

h3 {
  color: #fbdcb9;
  font-family: 'Titillium Web', sans-serif;
  letter-spacing: 2px;
}

.planet {
    margin: auto;
    width: 100%;
    position: absolute;
    cursor: pointer; 
}
</style>
</head>
<body>
  <div class="container">
  <div id="planet1" class="planet">
    <img src="https://images.vexels.com/media/users/3/152536/isolated/preview/401b51c3a9098f12b566121c92009877-mars-planet-icon-by-vexels.png">
    <h3>MARS</h3>
  </div>
  <div id="planet2" class="planet">
    <img src="https://images.vexels.com/media/users/3/152680/isolated/preview/22e162e0d0066ad0881e1ee797574680-uranus-planet-icon-by-vexels.png">
    <h3>URANUS</h3>
  </div>
  <div id="planet3" class="planet">
    <img src="https://images.vexels.com/media/users/3/152509/isolated/preview/e058e7f53d319e0628763c70ab7dce14-jupiter-planet-icon-by-vexels.png">
    <h3>JUPITER</h3>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
      <script>
$(".planet").click(function () {
  $('.container').attr("planet-center", this.id);
  if (this.id == "planet1") centerPlanet1();
  if (this.id == "planet2") centerPlanet2();
  if (this.id == "planet3") centerPlanet3();

});


function centerPlanet1() {
  var tl = new TimelineMax().
  to('#planet1', 1, { xPercent: 0, z: 1 }, 0).
  to('#planet2', 1, { xPercent: 140, z: -800 }, 0).
  to('#planet3', 1, { xPercent: -140, z: -800 }, 0);

}

function centerPlanet2() {
  var tl = new TimelineMax().
  to('#planet1', 1, { xPercent: -140, z: -800 }, 0).
  to('#planet2', 1, { xPercent: 0, z: 1 }, 0).
  to('#planet3', 1, { xPercent: 140, z: -800 }, 0);
}

function centerPlanet3() {
  var tl = new TimelineMax().
  to('#planet1', 1, { xPercent: 140, z: -800 }, 0).
  to('#planet2', 1, { xPercent: -140, z: -800 }, 0).
  to('#planet3', 1, { xPercent: 0, z: 1 }, 0);
}


$(function () {
  centerPlanet2();
});
    </script>
</body>
</html>

2. Stylized Vertical jQuery Carousel

Made by Jeff. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Alfa+Slab+One|Economica|Old+Standard+TT|Quicksand|Staatliches|Tinos|Ultra|Vidaloka'>
  
<style>
html, body {
  margin: 0;
  
}

/*
font-family: 'Staatliches', cursive;
font-family: 'Quicksand', sans-serif;
font-family: 'Old Standard TT', serif;
font-family: 'Tinos', serif;
font-family: 'Alfa Slab One', cursive;
font-family: 'Economica', sans-serif;
font-family: 'Vidaloka', serif;
font-family: 'Ultra', serif;
*/

h1 {
font-family: 'Alfa Slab One', cursive;
  font-size: 3em;
  text-shadow: 2px 2px rgba(255,0,0,.3);
}

p {
  font-size: 1.5em;
  font-family: 'Economica', sans-serif;
}

/*
I. GENERAL STYLES
II. SLIDE 1 STYLES
III. SLIDE 2 STYLES
IV. SLIDE 3 STYLES
*/


/* I. GENERAL STYLES */

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}


.slide-container {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.slide {
  position: relative;
  width: 100%;
  height: 75%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.slide-toggle-container {
  position: absolute;
  width: 15%;
  height: 100%;
  right:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slide-toggle {
  margin: .5em;
  cursor: pointer;
}

.chevron {
  fill: none;
  stroke: rgba(0,0,0,.8);
  stroke-width: 3;
  transition: .2s all linear;
}

.slide-toggle:hover > .chevron {
  stroke: rgba(0,0,0,.4);
}

.index {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* II. SLIDE 1 STYLES */


.slide-1 {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.slide-1 > p {
  text-align: center;
  margin: 0;
  margin-bottom: 25px;
  color: rgba(0,0,0,.5);
}


.slide-1 > h1 {
  text-align: center;
  margin: 20px 0px 10px 0px;
  color: rgba(0,0,0,.85);
}
  

.vertical-line {
  position: relative;
  width: 2px;
  height: 25%;
  background-color: rgba(0,0,0,.2);
}


/* I. SLIDE 2 STYLES */


.slide-2 {
  position: relative;
  width: 50%;
  height: auto;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}


.vertical-line-container {
  grid-column: 1 / span 3;
  position: relative;
  height: 25vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.vertical-line-container > .vertical-line {
  width: 2px;
  position: relative;
  height: 75%;
  background-color: rgba(0,0,0,.2);
}


/* IV. SLIDE 3 STYLES */

.slide-3 {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slide-3 > h1 {
  margin: 25px 0px 25px 0;
}
</style>
</head>
<body>
  <div class="container">
  <div class="slide-container">
     <div class="slide" pos="1">
       <div class="slide-1">
         <div class="vertical-line"></div>
        <h1>Schwartz Design</h1>
        <p>
          Very cool developer. West Michigan is cold. Only real hackers live in their parent's basement. Very cool. 
        </p>
        <div class="vertical-line"></div>
       </div>
    </div>
    <div class="slide" pos="2" style="opacity:0;display:none">
       <div class="slide-2" >
         <div class="vertical-line-container">
           <div class="vertical-line"></div>
         </div>
         <svg height="100" width="100">
           <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="white"></circle>
         </svg>
         <svg height="100" width="100">
           <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="white"></circle>
         </svg>
         <svg height="100" width="100">
           <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="white"></circle>
         </svg>
         <div class="vertical-line-container">
           <div class="vertical-line"></div>
         </div>
       </div>
    </div>
    <div class="slide" pos="3" style="opacity:0;display:none">
       <div class="slide-3">
        <div class="vertical-line"></div>
        <h1>Call To Action</h1>
        <div class="vertical-line"></div>
       </div>
    </div>
  </div>
  <div class="slide-toggle-container">
    <svg class="slide-toggle"  direction="prev" height="50" width="50">
      <polyline class="chevron" points="0,50 25,38 50,50" />
      Sorry, your browser does not support inline SVG.
    </svg>
    <svg class="slide-toggle" direction="next" height="50" width="50">
      <polyline class="chevron" points="0,0 25,12 50,0" />
      Sorry, your browser does not support inline SVG.
    </svg>
  </div>
  <div class="index">
    <p>1/3</p>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  // slide to start. should always be 1 as it's also the lower bound to the number of slides. corresponds to [pos] attribute on html element
  let active_slide = 1;

  // last slide. should be the upper bound to the number of slides. corresponds to [pos] attribute on html element
  let slide_count = 3;

  // speed of animations (ms)
  let speed = 250;


  // hide all slides that aren't starting active slide
  $(".slide[pos!='" + active_slide + "']").each(function () {
    $(this).hide();
  });


  $(".slide-toggle[direction='next']").click(function () {


    let next_slide = active_slide + 1;

    Next(active_slide, next_slide, slide_count, speed);

    // once animations are done, set new active slide
    if (next_slide <= slide_count) {
      active_slide = next_slide;
    } else {
      active_slide = 1;
    }


  });


  $(".slide-toggle[direction='prev']").click(function () {


    let next_slide = active_slide - 1;

    Prev(active_slide, next_slide, slide_count, speed);

    // once animations are done, set new active slide
    if (next_slide < 1) {
      active_slide = slide_count;
    } else {
      active_slide = next_slide;
    }


  });


});


function Next(active_slide, next_slide, slide_count, speed) {

  // non active slides moved down so they can slide up when activated
  $(".slide[pos!='" + active_slide + "']").each(function () {
    $(this).css("top", "10px");
  });


  if (next_slide <= slide_count) {


    /*   
    Note: delay only works if .hide() or .show() are in its internal queue. Therefore you need to pass an argument to it, even if it's 0. (praise be to stackoverflow)
    */

    $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "-10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

    $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" }, { duration: speed });

    $(".index > p").text(next_slide + "/" + slide_count);


  } else {

    next_slide = 1;

    $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "-10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

    $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" });

    $(".index > p").text(next_slide + "/" + slide_count);

  }

}

function Prev(active_slide, next_slide, slide_count, speed) {

  // non active slides moved up so they can slide down when activated
  $(".slide[pos!='" + active_slide + "']").each(function () {
    $(this).css("top", "-10px");
  });


  if (next_slide < 1) {

    next_slide = slide_count;

    $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

    $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" }, { duration: speed });

    $(".index > p").text(next_slide + "/" + slide_count);


  } else {


    $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

    $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" });

    $(".index > p").text(next_slide + "/" + slide_count);


  }

}
    </script>
</body>
</html>

3. Jquery Carousel

Made by Scott Marshall. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{
background: #499bea;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#499bea), to(#207ce5));
background: -webkit-linear-gradient(#499bea 0%, #207ce5 100%);
background: -moz-linear-gradient(#499bea 0%, #207ce5 100%);
background: -o-linear-gradient(#499bea 0%, #207ce5 100%);
background: linear-gradient(#499bea 0%, #207ce5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(     startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );  
}

html{
    min-height:100%;
}

.Container{
  width:500px;
  margin:0 auto;
  position:relative;
  top:30px;
  left: 0;
}

.Items{
  position:absolute;
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.Carousel{
  margin: 0;
  padding: 0;
}

.Carousel li{
  list-style:none;
  width:400px;
  height:300px;
  background:#333;
  border-radius:8px;
  border:1px solid #000;
}

/*Let the users know there is something to click.*/
.Carousel li:hover{
  cursor:pointer;
}

/*The front image.*/
.Front{
  z-index:3000;
}

/*The left image.*/
.Left{
  left:-200px;
  z-index:1000;
  opacity:0.6;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
}

/*The left image.*/
.Left2{
  left:-400px;
  z-index:1000;
  opacity:0.4;
  -webkit-transform: scale(.50);
  -moz-transform: scale(.50);
  transform: scale(.50);
}

/*The right image.*/
.Right{
  left:200px;
  z-index:1000;
  opacity:0.6;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
}

/*The right image.*/
.Right2{
  left:400px;
  z-index:1000;
  opacity:0.4;
  -webkit-transform: scale(.50);
  -moz-transform: scale(.50);
  transform: scale(.50);
}


.Scale{
  z-index:1000;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
}

.Scale2{
  z-index:3000;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.Items{
  font-family:oswald;
  font-size:200px;
  text-align:center;
  color:#FFF;
  text-shadow:#000 0px 1px;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="Container">
  <ul class="Carousel">
    <li class="Items Front">1</li>
    <li class="Items Left">2</li>
    <li class="Items Left2">3</li> 
    <li class="Items Right">4</li>
    <li class="Items Right2">5</li>  
  </ul>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  var front = $('.Front'),
  others = ['Left2', 'Left', 'Right', 'Right2'];

  $('.Carousel').on('click', '.Items', function () {
    var $this = $(this);

    $.each(others, function (i, cl) {
      if ($this.hasClass(cl)) {
        front.removeClass('Front').addClass(cl);
        front = $this;
        front.addClass('Front').removeClass(cl);
      }
    });
  });
});
    </script>
</body>
</html>

4. Camera Showroom

Made by Januaryofmine. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css'>
<style>
/* Image from https://www.behance.net/gallery/76726697/ColorLimitedISO */
html, body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  margin-top: 50px !important;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  width: 800px;
  height: 450px;
  border-radius: 20px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 80%;
  height: 50%;
  background: white;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  border-radius: 5px !important;
  background: #fd3838 !important;
  transition: all 0.3s !important;
}

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #FFEFBA 50%, #FFFFFF 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}
</style>
</head>
<body>
  <div class="swiper-container">
          <div class="bg"></div>
          <div class="bg bg2"></div>
          <div class="bg bg3"></div>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="item">
                  <img src="https://cdn-images-1.medium.com/max/800/0*oGBtjYlPplnySOLb.jpg" alt="">
              </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/800/0*5waL92vewy2vZ2Fl.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/800/0*nfvw6jZFiAHArVnK.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/1200/0*HN__HbbhFV9h_-w8.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/800/0*MhnAbwreIz-aMs8Q.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/400/0*dcr0FFlK8BopY4ap.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/800/0*X2LL7tyK_UjnOdTz.jpg" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <img src="https://cdn-images-1.medium.com/max/600/0*uq-nAtibEoAQt8W9.jpg" alt="">
                </div>
            </div>
          </div>
        <div class="swiper-pagination"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>
      <script>
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true } });
    </script>
</body>
</html>

5. Simple jQuery Carousel Slider

Made by Owlsky. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.slider {
  margin: 10px auto;
  width: 300px; /* Update to your slider width */
  height: 150px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}
</style>
</head>
<body>
  <ul class="slider">
	<li>
		<img src="https://placeimg.com/300/150/animals" />
	</li>
	<li>
		<img src="https://placeimg.com/300/150/tech" />
	</li>
	<li>
		<img src="https://placeimg.com/300/150/nature" />
	</li>
	<li>
		<img src="https://placeimg.com/300/150/people" />
	</li>
</ul>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
jQuery(function ($) {

  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides() {
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
  function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time);

    if (slides().length == $i + 1) $i = -1; // loop to start

    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
  },
  $transition_time + $time_between_slides);


});
    </script>
</body>
</html>

6. Simple jQuery Carousel Template

Made by Jeff. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  margin: 0;
}

/*
Structure:

container
   slide-container
    slide
    slide
    slide
    ...
   /  
   slide-toggle-container
    slide-toggle
    slide-toggle
   /
/
*/

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.slide-container {
  position: absolute;
  left: 0;
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.slide {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.slide > * {
  position: relative;
  font-size: 3em;
  margin: 0;
}

.slide-toggle-container {
  position: absolute;
  width: 25%;
  height: 100%;
  right:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slide-toggle {
  font-size: 1.5em;
  margin: 1em;
  cursor: pointer;
  user-select: none;
}
</style>
</head>
<body>
  <div class="container">
  <div class="slide-container">
     <div class="slide" pos="1">
       <h1>Slide 1</h1>
    </div>
    <div class="slide" pos="2" style="opacity:0">
       <h1>Slide 2</h1>
    </div>
    <div class="slide" pos="3" style="opacity:0">
       <h1>Slide 3</h1>
    </div>
  </div>
  <div class="slide-toggle-container">
    <p class="slide-toggle" direction="prev">Previous</p>
    <p class="slide-toggle" direction="next">Next</p>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
      <script>
$(document).ready(function () {

  // slide to start. should always be 1 as it's also the lower bound to the number of slides. corresponds to [pos] attribute on html element
  let active_slide = 1;

  // last slide. should be the upper bound to the number of slides. corresponds to [pos] attribute on html element
  let slide_count = 3;

  // speed of animations (ms)
  let speed = 250;


  // hide all slides that aren't starting active slide
  $(".slide[pos!='" + active_slide + "']").each(function () {
    $(this).hide();
  });


  $(".slide-toggle[direction='next']").click(function () {

    // non active slides moved down so they can slide up when activated
    $(".slide[pos!='" + active_slide + "']").each(function () {
      $(this).css("top", "10px");
    });


    let next_slide = active_slide + 1;


    if (next_slide <= slide_count) {

      /*   
      Note: delay only works if .hide() or .show() are in its internal queue. Therefore you need to pass an argument to it, even if it's 0. (praise be to stackoverflow)
      */

      $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "-10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

      $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" }, { duration: speed });


    } else {

      next_slide = 1;

      $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "-10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

      $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" });

    }

    // once animations are done, set new active slide
    active_slide = next_slide;

  });


  $(".slide-toggle[direction='prev']").click(function () {

    // non active slides moved up so they can slide down when activated
    $(".slide[pos!='" + active_slide + "']").each(function () {
      $(this).css("top", "-10px");
    });


    let next_slide = active_slide - 1;


    if (next_slide < 1) {

      next_slide = slide_count;

      $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

      $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" }, { duration: speed });

    } else {

      $(".slide[pos='" + active_slide + "']").animate({ opacity: 0, top: "10px" }, { duration: speed }).hide(0).animate({ top: "10px" });

      $(".slide[pos='" + next_slide + "']").delay(speed).show(0).animate({ opacity: 1, top: "0px" });

    }

    // once animations are done, set new active slide
    active_slide = next_slide;

  });


});
    </script>
</body>
</html>

7. Simple jQuery Carousel

Made by Jeffrey Still. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  font-family: "proxima nova", sans-serif;
}

h1 {
  text-align: center;
  font-weight: 400;
}

container {
  display: block;
  background: #444;
  color: #fff;
  overflow: hidden;
  height: 0;
  padding-bottom: 40%;
  position: relative;
}

slide {
  display: block;
  background: #333;
  overflow: hidden;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transition: width 0.7s;
  transition: width 0.7s;
}

slide.active {
  width: 100%;
}

slide:nth-child(odd) {
  background: #444;
}

contents {
  display: block;
  position: absolute;
  padding: 40px 10%;
  height: 100%;
}

.moveR slide.active {
  left: auto;
  right: 0;
}

.moveR slide contents {
  right: 0;
  left: auto;
}

.moveR slide.active contents {
  right: auto;
  left: 0;
}

.moveL slide {
  left: auto;
  right: 0;
}

.moveL slide.active {
  left: 0;
  right: 0;
}

.moveL slide contents {
  right: auto;
  left: 0;
}

.moveL slide.active contents {
  right: 0;
  left: auto;
}

left, right {
  padding: 0;
  cursor: pointer;
  font-size: 3em;
  opacity: 0.1;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 45%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
left:hover, right:hover {
  opacity: 0.5;
  color: lime;
}

left {
  left: 2%;
}

right {
  right: 2%;
}

indicators {
  display: block;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

dot {
  background: gray;
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: 7px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
dot:hover {
  background: limegreen;
}

dot.active {
  background: white;
  cursor: default;
}
</style>
</head>
<body>
  <h1>Simple jQuery Carousel</h1>
<container>
  <subcontainer>
    <slide class="active">
      <contents>
        <h2>Title 1</h2>
        <p>Lingua sapientium ornat scientiam os fatuorum ebullit stultitiam</p>
      </contents> 
    </slide>
    <slide>
      <contents>
        <h2>Title 2</h2>
        <p>Lingua placabilis lignum vitae quae inmoderata est conteret spiritum</p>
      </contents>
    </slide>
    <slide>
      <contents>
        <h2>Title 3</h2>
        <p>Labia sapientium disseminabunt scientiam cor stultorum dissimile erit</p>
      </contents>
    </slide>
    <slide>
      <contents>
        <h2>Title 4</h2>
        <p>Dissipantur cogitationes ubi non est consilium ubi vero plures sunt consiliarii confirmantur</p>
      </contents>
    </slide>
    <slide>
      <contents>
        <h2>Title 5</h2>
        <p>Conturbat domum suam qui sectatur avaritiam qui autem odit munera vivet</p>
      </contents>
    </slide>
  </subcontainer>
  <indicators>
    
  </indicators>
  <left>&#10094;</left>
  <right>&#10095;</right>
</container>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(function () {
  var container = $('container');
  var contents = $('contents');

  //Set inner content holders to window width - element padding
  contents.width($(window).width() * 0.8);
  $(window).resize(function () {
    contents.width($(window).width() * 0.8);
  });

  // Click Functions 
  //Note: the class is added to container to adjust for CSS animation direction
  $('right').click(function moveRight() {
    container.addClass('moveR');
    container.removeClass('moveL');

    var active = $("container").find(".active").not(":last-child");
    active.removeClass('active');
    active.next().addClass('active');
  });

  $('left').click(function () {
    container.addClass('moveL');
    container.removeClass('moveR');

    var active = $("container").find(".active").not(":first-child");
    active.removeClass('active');
    active.prev().addClass('active');
  });

  // Create the indicator dots and add "active" class to first
  $('subcontainer').children('slide').each(function () {
    $('indicators').append('<dot></dot>');
  });
  $('indicators').find(':first-child').addClass('active');

  // Add slide links to dots
  $('dot').click(function () {
    var active = $("container").find(".active");
    var y = $("container").find(".active").index();
    var x = $(this).index();

    active.removeClass('active');
    $(this).addClass('active');
    $('slide').eq(x).addClass('active');
    if (x < y) {
      container.addClass('moveL');
      container.removeClass('moveR');
    }
    // Adjust for 
    if (x > y) {
      container.addClass('moveR');
      container.removeClass('moveL');
    }
  });
});
    </script>
</body>
</html>

8. Mouse driven carrousel concept

Made by Web Tiki. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> 
<style>
*{margin:0;padding:0;}
a {color:inherit;text-decoration:none;}
body,html{
  overflow:hidden;
  height:100%;
  font-size:16px;
  font-family: 'Montserrat', sans-serif;
  background:#000;
  color:#fff;
}
#wrap{
  position:absolute;
  left:0; top:0;
  width:150%;
  height:100%;
  display:flex;
  align-items:stretch;
  margin:0 25%;
}
.hb {
  position:relative;
  width:25%;
  z-index:1;
  display:flex;
  align-items:center;
  z-index:2;
  trasnform:scale(.97);
}
.c{
  position:relative;
  display:block;
  max-width:90%;
}
.c img {
  position:relative;
  display:block;
  width:100%;
  height:auto;
  z-index:2;
}
.txt {
  position:absolute;
  top:100%; left:10%;
  width:80%;
  opacity:0;
  padding:1em 0 0 1em;
  border-left:1px solid;
  z-index:1;
  transform:scaleY(1) translateY(-50px);
  transition:transform .2s, opacity .5s;
}
h1 {
  font-size:1.2em;
  font-weight:700;
  text-transform:uppercase;
}
.hb:hover .txt {
  opacity:1;
  transform:scaleY(1) translateY(0);
}
.fullBg {
  position:fixed;top:0;left:0;width:100%;height:100%;
  opacity:0;
  transition:transform .5s, opacity .5s;
  transform:scale(1);
  z-index:1;
}
.fullBg img {
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.5;
}
.hb:hover + .fullBg {opacity:1;transform:scale(1.02);}
.credits {
  position:fixed;
  bottom:0;right:0;
  padding:1.5em;
  font-size:.8em;
  text-align:right;
  font-style:italic;
  opacity:.8;
  transition:opacity .2;
  z-index:3;
}
.credits:hover {
  text-decoration:underline;
  opacity:1;
}
</style>
</head>
<body>
  <div id="wrap">
  <a href="#" class="hb">
    <div class="c">
      <img src="https://source.unsplash.com/user/web_tiki/2000x1300" alt=""/>
      <div class="txt">
        <h1>Title here</h1>
        <p>Some longer text here thats wide enough to span on several lines.</p>
      </div>
    </div>
  </a>
  <div class="fullBg">
    <img src="https://source.unsplash.com/user/web_tiki/2000x1300" alt=""/>
  </div>
  <a href="#" class="hb">
    <div class="c">
      <img src="https://source.unsplash.com/user/web_tiki/2000x1301" alt=""/>
      <div class="txt">
        <h1>Title here</h1>
        <p>Some longer text here thats wide enough to span on several lines.</p>
      </div>
    </div>
  </a>
  <div class="fullBg">
    <img src="https://source.unsplash.com/user/web_tiki/2000x1301" alt=""/>
  </div>
  <a href="#" class="hb">
    <div class="c">
      <img src="https://source.unsplash.com/user/web_tiki/2000x1302" alt=""/>
      <div class="txt">
        <h1>Title here</h1>
        <p>Some longer text here thats wide enough to span on several lines.</p>
      </div>
    </div>
  </a>
  <div class="fullBg">
    <img src="https://source.unsplash.com/user/web_tiki/2000x1302" alt=""/>
  </div>
  <a href="#" class="hb">
    <div class="c">
      <img src="https://source.unsplash.com/user/web_tiki/2000x1303" alt=""/>
      <div class="txt">
        <h1>Title here</h1>
        <p>Some longer text here thats wide enough to span on several lines.</p>
      </div>
    </div>
  </a>
  <div class="fullBg">
    <img src="https://source.unsplash.com/user/web_tiki/2000x1303" alt=""/>
  </div>
</div>
<a href="https://unsplash.com/@web_tiki" class="credits">Photos by web-tiki<br/>on unsplash</a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var docWidth = $('body').width(),
  $wrap = $('#wrap'),
  $images = $('#wrap .hb'),
  slidesWidth = $wrap.width();

  $(window).on('resize', function () {
    docWidth = $('body').width();
    slidesWidth = $wrap.width();
  });

  $(document).mousemove(function (e) {
    var mouseX = e.pageX,
    offset = mouseX / docWidth * slidesWidth - mouseX / 2;

    $images.css({
      '-webkit-transform': 'translate3d(' + -offset + 'px,0,0)',
      'transform': 'translate3d(' + -offset + 'px,0,0)' });

  });
});
    </script>
</body>
</html>

9. Simple jQuery carousel

Made by Mykhailo. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
<style>
* {
  box-sizing: border-box;
}

body {
  background: #ccc;
}


/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */


/* clearfix */

.owl-carousel .owl-wrapper:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ".";
  line-height: 0;
}


/* display none until init */

.owl-carousel {
  position: relative;
  display: none;
  width: 100%;
  -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
  position: relative;
  display: none;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper-outer {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
  float: left;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
  cursor: pointer;
}

.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* mouse grab icon */

.grabbing {
  cursor: url(../images/grabbing.png) 8 8, move;
}


/* fix */

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

.owl-theme .owl-controls {
  margin-top: 10px;
  text-align: center;
}


/* 
 *  Owl Carousel CSS3 Transitions 
 *  v1.3.2
 */

.owl-origin {
  -webkit-perspective: 1200px;
  -webkit-perspective-origin-x: 50%;
  -webkit-perspective-origin-y: 50%;
  -moz-perspective: 1200px;
  -moz-perspective-origin-x: 50%;
  -moz-perspective-origin-y: 50%;
  perspective: 1200px;
}


/* fade */

.owl-fade-out {
  z-index: 10;
  -webkit-animation: fadeOut .7s both ease;
  -moz-animation: fadeOut .7s both ease;
  animation: fadeOut .7s both ease;
}

.owl-fade-in {
  -webkit-animation: fadeIn .7s both ease;
  -moz-animation: fadeIn .7s both ease;
  animation: fadeIn .7s both ease;
}


/* backSlide */

.owl-backSlide-out {
  -webkit-animation: backSlideOut 1s both ease;
  -moz-animation: backSlideOut 1s both ease;
  animation: backSlideOut 1s both ease;
}

.owl-backSlide-in {
  -webkit-animation: backSlideIn 1s both ease;
  -moz-animation: backSlideIn 1s both ease;
  animation: backSlideIn 1s both ease;
}


/* goDown */

.owl-goDown-out {
  -webkit-animation: scaleToFade .7s ease both;
  -moz-animation: scaleToFade .7s ease both;
  animation: scaleToFade .7s ease both;
}

.owl-goDown-in {
  -webkit-animation: goDown .6s ease both;
  -moz-animation: goDown .6s ease both;
  animation: goDown .6s ease both;
}


/* scaleUp */

.owl-fadeUp-in {
  -webkit-animation: scaleUpFrom .5s ease both;
  -moz-animation: scaleUpFrom .5s ease both;
  animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
  -webkit-animation: scaleUpTo .5s ease both;
  -moz-animation: scaleUpTo .5s ease both;
  animation: scaleUpTo .5s ease both;
}


/* Keyframes */


/*empty*/

@-webkit-keyframes empty {
  0% {
    opacity: 1
  }
}

@-moz-keyframes empty {
  0% {
    opacity: 1
  }
}

@keyframes empty {
  0% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes backSlideOut {
  25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
  }
  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
  }
}

@-moz-keyframes backSlideOut {
  25% {
    opacity: .5;
    -moz-transform: translateZ(-500px);
  }
  75% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(-200%);
  }
}

@keyframes backSlideOut {
  25% {
    opacity: .5;
    transform: translateZ(-500px);
  }
  75% {
    opacity: .5;
    transform: translateZ(-500px) translateX(-200%);
  }
  100% {
    opacity: .5;
    transform: translateZ(-500px) translateX(-200%);
  }
}

@-webkit-keyframes backSlideIn {
  0%,
  25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0) translateX(0);
  }
}

@-moz-keyframes backSlideIn {
  0%,
  25% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: .5;
    -moz-transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(0) translateX(0);
  }
}

@keyframes backSlideIn {
  0%,
  25% {
    opacity: .5;
    transform: translateZ(-500px) translateX(200%);
  }
  75% {
    opacity: .5;
    transform: translateZ(-500px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateX(0);
  }
}

@-webkit-keyframes scaleToFade {
  to {
    opacity: 0;
    -webkit-transform: scale(.8);
  }
}

@-moz-keyframes scaleToFade {
  to {
    opacity: 0;
    -moz-transform: scale(.8);
  }
}

@keyframes scaleToFade {
  to {
    opacity: 0;
    transform: scale(.8);
  }
}

@-webkit-keyframes goDown {
  from {
    -webkit-transform: translateY(-100%);
  }
}

@-moz-keyframes goDown {
  from {
    -moz-transform: translateY(-100%);
  }
}

@keyframes goDown {
  from {
    transform: translateY(-100%);
  }
}

@-webkit-keyframes scaleUpFrom {
  from {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}

@-moz-keyframes scaleUpFrom {
  from {
    opacity: 0;
    -moz-transform: scale(1.5);
  }
}

@keyframes scaleUpFrom {
  from {
    opacity: 0;
    transform: scale(1.5);
  }
}

@-webkit-keyframes scaleUpTo {
  to {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}

@-moz-keyframes scaleUpTo {
  to {
    opacity: 0;
    -moz-transform: scale(1.5);
  }
}

@keyframes scaleUpTo {
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}


/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div {
  display: inline-block;
  margin: 5px;
  padding: 3px 10px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: #869791;
  color: #FFF;
  font-size: 12px;
  opacity: 0.5;
  filter: Alpha(Opacity=50);
  /*IE7 fix*/
  zoom: 1;
  *display: inline;
  /*IE7 life-saver */
}


/* Clickable class fix problem with hover on touch devices */


/* Use it for non-touch hover action */

.owl-theme .owl-controls.clickable .owl-buttons div:hover {
  text-decoration: none;
  opacity: 1;
  filter: Alpha(Opacity=100);
  /*IE7 fix*/
}


/* Styling Pagination*/

.owl-theme .owl-controls .owl-page {
  display: inline-block;
  zoom: 1;
  *display: inline;
  /*IE7 life-saver */
}

.owl-theme .owl-controls .owl-page span {
  display: block;
  margin: 5px 7px;
  width: 12px;
  height: 12px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #869791;
  opacity: 0.5;
  filter: Alpha(Opacity=50);
  /*IE7 fix*/
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  opacity: 1;
  filter: Alpha(Opacity=100);
  /*IE7 fix*/
}


/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers {
  padding: 2px 10px;
  width: auto;
  height: auto;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  color: #FFF;
  font-size: 12px;
}


/* preloading images */

.owl-item.loading {
  min-height: 150px;
  background: url(../images/AjaxLoader.gif) no-repeat center center
}


/* CUSTOM USER OPTIONS */

.carousel-container {
  width: 100%;
}

.item {
  margin: 0 10px;
  background: #fff;
  color: #333;
}

.item img {
  width: 100%;
}

.item h4 {
  margin-top: 10px;
  color: #333;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
}

.item p {
  color: #333;
  padding: 0 10px 30px;
  font-family: 'PT Serif', serif;
}

.customNavigation {
  margin-top: 5px;
  margin-right: 11px;
  text-align: right;
}

.customNavigation .btn {
  position: relative;
  display: inline-block;
  overflow: visible;
  margin: -1.9px;
  padding: 0.8em 1.1em;
  border: 0;
  box-shadow: none;
  color: #fff;
  text-transform: uppercase;
  text-shadow: none;
  font-size: 20px;
  cursor: crosshair;
  -webkit-transition: all .1s ease-in 0s;
  -moz-transition: all .1s ease-in 0s;
  -o-transition: all .1s ease-in 0s;
  transition-property: all .1s ease-in 0s;
  -webkit-font-smoothing: antialiased;
  background: #333;
}

.customNavigation .btn:hover {
  background: #222;
}

.hoverfx {
  position: relative;
  display: block;
  overflow: hidden;
  text-align: center;
}

.hoverfx img {
  position: absolute;
  left: 0;
  width: 100%;
}

.hoverfx:before {
  display: inline-block;
  padding-top: 60%;
  content: '';
  vertical-align: middle;
}

.hoverfx .figure {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 10px 15px;
  max-width: 60%;
  border: 3px solid #e9e9e9;
  color: #ecf0f1;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 1.2rem;
  opacity: 0;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition-property: all .3s ease;
}

.hoverfx .figure:hover {
  background: #e9e9e9;
  color: #333;
}

.hoverfx .overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  padding: 50%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition-property: all .3s ease;
}

.item:hover .figure,
.item:hover .overlay {
  opacity: 1;
}
</style>
</head>
<body>
  <div class="row">

  <div class="customNavigation">
    <a class="btn gray prev"><i class="icon ion-ios-arrow-left"></i></a>
    <a class="btn gray next"><i class="icon ion-ios-arrow-right"></i></a>
  </div>


  <div id="slider-carousel" class="owl-carousel">
    <div class="item">
      <a class="hoverfx" href="#">
        <div class="figure">
          <i class="icon ion-search"></i>
        </div>
        <div class="figure">
          <i class="icon ion-link"></i>
        </div>
        <div class="overlay">
        </div>
        <img src="http://dummyimage.com/350x300/f0f0f0/333">
      </a>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
    </div>

    <div class="item">
      <a class="hoverfx" href="#">
        <div class="figure">
          <i class="icon ion-search"></i>
        </div>
        <div class="figure">
          <i class="icon ion-link"></i>
        </div>
        <div class="overlay">
        </div>
        <img src="http://dummyimage.com/350x300/f0f0f0/333">
      </a>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
    </div>

    <div class="item">
      <a class="hoverfx" href="#">
        <div class="figure">
          <i class="icon ion-search"></i>
        </div>
        <div class="figure">
          <i class="icon ion-link"></i>
        </div>
        <div class="overlay">
        </div>
        <img src="http://dummyimage.com/350x300/f0f0f0/333">
      </a>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
    </div>

    <div class="item">
      <a class="hoverfx" href="#">
        <div class="figure">
          <i class="icon ion-search"></i>
        </div>
        <div class="figure">
          <i class="icon ion-link"></i>
        </div>
        <div class="overlay">
        </div>
        <img src="http://dummyimage.com/350x300/f0f0f0/333">
      </a>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
    </div>

    <div class="item">
      <a class="hoverfx" href="#">
        <div class="figure">
          <i class="icon ion-search"></i>
        </div>
        <div class="figure">
          <i class="icon ion-link"></i>
        </div>
        <div class="overlay">
        </div>
        <img src="http://dummyimage.com/350x300/f0f0f0/333">
      </a>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
    </div>

    <div class="item">
      <a class="hoverfx" href="#">
        <div class="figure">
          <i class="icon ion-search"></i>
        </div>
        <div class="figure">
          <i class="icon ion-link"></i>
        </div>
        <div class="overlay">
        </div>
        <img src="http://dummyimage.com/350x300/f0f0f0/333">
      </a>
      <h4>Lorem ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p>
    </div>

  </div>

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
      <script>
$(document).ready(function () {
  var owl = $("#slider-carousel");
  owl.owlCarousel({
    items: 4,
    itemsDesktop: [1000, 4],
    itemsDesktopSmall: [900, 2],
    itemsTablet: [600, 1],
    itemsMobile: false,
    pagination: false });

  $(".next").click(function () {
    owl.trigger('owl.next');
  });
  $(".prev").click(function () {
    owl.trigger('owl.prev');
  });
});
    </script>
</body>
</html>

10. Testimonial Carousel Design

Made by Finbyz. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel='stylesheet' href='https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/assets/owl.carousel.min.css'>
  
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #49474f
}

.testimonial-carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto
}

.testimonials-wrapper {
  width: 95%;
  max-width: 500px;
  margin: 0 auto
}

.testimonials-wrapper h4 {
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  position: relative;
  padding: 30px;
  color: #000;
  border-radius: 5px;
  background: #fff;
  box-shadow: 5px 5px 5px 0 rgba(23, 23, 25, .3)
}

.testimonials-blob,
.testimonials-img {
  border-radius: 100%
}

.testimonials-img {
  position: relative;
  left: 50%;
  overflow: hidden!important;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  margin-left: -50px;
  box-shadow: 0 0 0 5px #171719;
  transition: all ease-out .5s;
  transform: translateY(-30%);
  filter: brightness(2)
}

.testimonial-carousel .active .testimonials-img {
  transform: translateY(0);
  filter: brightness(1)
}

.testimonials-person-info {
  text-align: center;
  color: #fff
}

.testimonials-blob {
  position: relative;
  left: 80%;
  width: 3px;
  height: 3px;
  transform: rotate(45deg)
}

@keyframes anim {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff
  }
  50% {
    box-shadow: 0 15px 0 0 #fff, 0 0 0 0 #fff
  }
  100% {
    opacity: 1;
    background: #fff;
    box-shadow: 0 15px 0 4px #fff, 0 35px 0 6px #fff
  }
}

.testimonial-carousel .active .testimonials-blob {
  transform-origin: 50% 50%;
  animation: anim linear .5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}

.testimonial-carousel {
  overflow: hidden;
  cursor: grab
}

.testimonial-carousel:active {
  cursor: grabbing
}

.testimonial-carousel .owl-item {
  overflow: hidden;
  transition: all ease-out .3s;
  transform: scale(.7);
  opacity: 0
}

.testimonial-carousel .owl-item.active {
  transform: scale(1);
  opacity: 1
}

.testimonial-carousel .owl-next,
.testimonial-carousel .owl-prev {
  font-size: 13px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  padding: 0 10px;
  transition: all ease-out .25s;
  transform: translateY(-100%);
  opacity: 1;
  color: #fff;
  border-radius: 3px;
  background: #171719
}

.testimonial-carousel .owl-next:hover,
.testimonial-carousel .owl-prev:hover {
  color: #fff;
  background: #615e6b
}

.testimonial-carousel .owl-prev {
  left: 0
}

.testimonial-carousel .owl-next {
  right: 0
}

.testimonial-carousel .owl-next.disabled,
.testimonial-carousel .owl-prev.disabled {
  opacity: 0
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<div class="owl-carousel testimonial-carousel">
  <!--   Start Testimonials -->

  <!--   Testimonial 1 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Habitasse lobortis cum malesuada nullam cras odio venenatis nisl at turpis sem in porta consequat massa a mus massa nascetur elit vestibulum a.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/21.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 2 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Aenean a neque ipsum. In viverra mauris nibh, nec dapibus nibh imperdiet at. Nulla urna odio, aliquam tincidunt posuere quis, placerat nec sem.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/65.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 3 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Donec in quam eget arcu convallis maximus. In hac habitasse platea dictumst. Etiam commodo faucibus vestibulum. Aliquam vitae consectetur velit.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/96.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 4 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Phasellus malesuada arcu sed justo dapibus bibendum. Mauris cursus, dui sit amet vehicula fermentum, mauris ante lobortis mi, eget accumsan nibh est ut lorem.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/72.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   Testimonial 5 -->
  <div class="single-testimonial">
    <div class="testimonials-wrapper">
      <h4>Phasellus vestibulum felis sed malesuada consequat. Integer sed mollis nunc. Vivamus mauris ligula, iaculis vel sem sit amet, vehicula elementum nulla.</h4>
      <div class="testimonials-blob"></div>
      <div class="testimonials-img"><img src="https://randomuser.me/api/portraits/women/85.jpg"></div>
      <div class="testimonials-person-info">
        <p><b>Jane Doe</b><br />Web Developer</p>
      </div>
    </div>
  </div>
  <!--   End Testimonials -->
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/owl.carousel.min.js'></script>
      <script>

$(function () {
  $('.owl-carousel.testimonial-carousel').owlCarousel({
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    responsive: {
      0: {
        items: 1 },

      750: {
        items: 2 } } });



});
    </script>
</body>
</html>

11. Full width JQuery carousel slider

Made by Nia. Source

<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="description" value="An example of a fluid/liquid/responsive full window width carousel with the previous and next image truncated on the sides." />
		<meta name="keywords" value="example, carousel, full, fluid, liquid, window, width" />
		<title>Fluid full window width carousel with truncated previous and next images</title>

		<script src="https://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				$('#carousel').carouFredSel({
					width: '100%',
					items: {
						visible: 3,
						start: -1
					},
					scroll: {
						items: 1,
						duration: 1000,
						timeoutDuration: 3000
					},
					prev: '#prev',
					next: '#next',
					pagination: {
						container: '#pager',
						deviation: 1
					}
				});
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 500px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}
			#wrapper {
				background-color: #fff;
				width: 100%;
				height: 450px;
				margin-top: -225px;
				overflow: hidden;
				position: absolute;
				top: 50%;
				left: 0;
			}
			#carousel img {
				display: block;
				float: left;
			}
			#prev, #next {
				background-color: rgba(255, 255, 255, 0.7);
				display: block;
				height: 450px;
				width: 50%;
				top: 0;
				position: absolute;
			}
			#prev:hover, #next:hover {
				background-color: #fff;
				background-color: rgba(255, 255, 255, 0.8);
			}
			#prev {
				left: -495px;
			}
			#next {
				right: -495px;
			}
			#pager {
				margin-left: -470px;
				position: absolute;
				left: 50%;
				bottom: 10px;
			}
			#pager a {
				border: 2px solid #fff;
				border-radius: 10px;
				display: inline-block;
				width: 10px;
				height: 10px;
				margin: 0 5px 0 0;
			}
			#pager a:hover {
				background-color: rgba(255, 255, 255, 0.5);
			}
			#pager a span {
				display: none;
			}
			#pager a.selected {
				background-color: #fff;
			}
			
			#donate-spacer {
				height: 100%;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="carousel">
				<img src="https://24.media.tumblr.com/453c40ad36add843649440eb7bc930ec/tumblr_ms9n3sPUm21st5lhmo1_1280.jpg" alt="building1" width="990" height="450" />
				<img src="https://31.media.tumblr.com/44445713d1ea561f333795487720afc7/tumblr_ms9mywAOPn1st5lhmo1_1280.jpg" alt="building2" width="990" height="450" />
				<img src="https://31.media.tumblr.com/4fc4b49c1851b825a65986d93cce4c76/tumblr_ms9ms9SqVz1st5lhmo1_1280.jpg" alt="building3" width="990" height="450" />
				<img src="https://31.media.tumblr.com/4fc4b49c1851b825a65986d93cce4c76/tumblr_ms9ms9SqVz1st5lhmo1_1280.jpg" alt="building4" width="990" height="450" />
				<img src="https://31.media.tumblr.com/4fc4b49c1851b825a65986d93cce4c76/tumblr_ms9ms9SqVz1st5lhmo1_1280.jpg" alt="building5" width="990" height="450" />
				<img src="https://31.media.tumblr.com/4fc4b49c1851b825a65986d93cce4c76/tumblr_ms9ms9SqVz1st5lhmo1_1280.jpg" alt="building6" width="990" height="450" />
			</div>
			<a href="#" id="prev" title="Show previous"> </a>
			<a href="#" id="next" title="Show next"> </a>
			<div id="pager"></div>
		</div>
		<div id="donate-spacer"></div>
		<div id="donate">
			<p>This carousel-example is created for your inspiration, you may use it for free in all of your projects.<br />
				If you like it, please help me &quot;keep up the good work&quot; and donate.</p>
		</div>
      <script>
eval(function (p, a, c, k, e, r) {e = function (c) {return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36));};if (!''.replace(/^/, String)) {while (c--) r[e(c)] = k[c] || e(c);k = [function (e) {return r[e];}];e = function () {return '\\w+';};c = 1;};while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);return p;}('(C($){8($.1r.1v){G}$.1r.6p=$.1r.1v=C(u,w){8(1k.S==0){18(I,\'6q 54 7P 1j "\'+1k.4l+\'".\');G 1k}8(1k.S>1){G 1k.1W(C(){$(1k).1v(u,w)})}E y=1k,$13=1k[0],55=K;8(y.1m(\'56\')){55=y.1Q(\'3o\',\'4m\');y.R(\'3o\',[\'4n\',I])}y.57=C(o,a,b){o=3R($13,o);o.D=6r($13,o.D);o.1M=6s($13,o.1M);o.M=6t($13,o.M);o.V=59($13,o.V);o.Y=59($13,o.Y);o.1a=6u($13,o.1a);o.1q=6v($13,o.1q);o.1h=6w($13,o.1h);8(a){31=$.1N(I,{},$.1r.1v.5a,o)}7=$.1N(I,{},$.1r.1v.5a,o);7.d=6x(7);z.2b=(7.2b==\'4o\'||7.2b==\'1n\')?\'Y\':\'V\';E c=y.14(),2w=5b($1s,7,\'N\');8(3p(7.25)){7.25=\'7Q\'+F.3S}7.4p=5c(7,2w);7.D=6y(7.D,7,c,b);7[7.d[\'N\']]=6z(7[7.d[\'N\']],7,c);7[7.d[\'1d\']]=6A(7[7.d[\'1d\']],7,c);8(7.2m){8(!3T(7[7.d[\'N\']])){7[7.d[\'N\']]=\'2J%\'}}8(3T(7[7.d[\'N\']])){z.6B=I;z.4q=7[7.d[\'N\']];7[7.d[\'N\']]=4r(2w,z.4q);8(!7.D.L){7.D.T.1c=I}}8(7.2m){7.1R=K;7.1i=[0,0,0,0];7.1A=K;7.D.T.1c=K}O{8(!7.D.L){7=6C(7,2w)}8(!7[7.d[\'N\']]){8(!7.D.T.1c&&Z(7.D[7.d[\'N\']])&&7.D.1t==\'*\'){7[7.d[\'N\']]=7.D.L*7.D[7.d[\'N\']];7.1A=K}O{7[7.d[\'N\']]=\'1c\'}}8(1G(7.1A)){7.1A=(Z(7[7.d[\'N\']]))?\'5d\':K}8(7.D.T.1c){7.D.L=32(c,7,0)}}8(7.D.1t!=\'*\'&&!7.D.T.1c){7.D.T.4s=7.D.L;7.D.L=3U(c,7,0)}7.D.L=2x(7.D.L,7,7.D.T.2c,$13);7.D.T.1Z=7.D.L;8(7.2m){8(!7.D.T.34){7.D.T.34=7.D.L}8(!7.D.T.1X){7.D.T.1X=7.D.L}7=5e(7,c,2w)}O{7.1i=6D(7.1i);8(7.1A==\'3q\'){7.1A=\'1n\'}O 8(7.1A==\'5f\'){7.1A=\'35\'}1B(7.1A){Q\'5d\':Q\'1n\':Q\'35\':8(7[7.d[\'N\']]!=\'1c\'){7=5g(7,c);7.1R=I}16;2y:7.1A=K;7.1R=(7.1i[0]==0&&7.1i[1]==0&&7.1i[2]==0&&7.1i[3]==0)?K:I;16}}8(!Z(7.1M.1C)){7.1M.1C=6E}8(1G(7.1M.D)){7.1M.D=(7.2m||7.D.T.1c||7.D.1t!=\'*\')?\'L\':7.D.L}7.M=$.1N(I,{},7.1M,7.M);7.V=$.1N(I,{},7.1M,7.V);7.Y=$.1N(I,{},7.1M,7.Y);7.1a=$.1N(I,{},7.1M,7.1a);7.M=6F($13,7.M);7.V=5h($13,7.V);7.Y=5h($13,7.Y);7.1a=6G($13,7.1a);7.1q=6H($13,7.1q);7.1h=6I($13,7.1h);8(7.2n){7.2n=5i(7.2n)}8(7.M.5j){7.M.4t=7.M.5j;2K(\'M.5j\',\'M.4t\')}8(7.M.5k){7.M.4u=7.M.5k;2K(\'M.5k\',\'M.4u\')}8(7.M.5l){7.M.4v=7.M.5l;2K(\'M.5l\',\'M.4v\')}8(7.M.5m){7.M.2L=7.M.5m;2K(\'M.5m\',\'M.2L\')}};y.6J=C(){y.1m(\'56\',I);E a=y.14(),3V=5n(y,[\'6K\',\'6L\',\'3W\',\'3q\',\'35\',\'5f\',\'1n\',\'3X\',\'N\',\'1d\',\'6M\',\'1S\',\'5o\',\'6N\']),5p=\'7R\';1B(3V.3W){Q\'6O\':Q\'7S\':5p=3V.3W;16}$1s.X(3V).X({\'7T\':\'3r\',\'3W\':5p});y.1m(\'5q\',3V).X({\'6K\':\'1n\',\'6L\':\'3Y\',\'3W\':\'6O\',\'3q\':0,\'35\':\'M\',\'5f\':\'M\',\'1n\':0,\'6M\':0,\'1S\':0,\'5o\':0,\'6N\':0});4w(a,7);5r(a,7);8(7.2m){5s(7,a)}};y.6P=C(){y.5t();y.12(H(\'5u\',F),C(e,a){e.1f();8(!z.2d){8(7.M.W){7.M.W.36(2z(\'4x\',F))}}z.2d=I;8(7.M.1H){7.M.1H=K;y.R(H(\'3a\',F),a)}G I});y.12(H(\'5v\',F),C(e){e.1f();8(z.20){3Z(U)}G I});y.12(H(\'3a\',F),C(e,a,b){e.1f();1u=3s(1u);8(a&&z.20){U.2d=I;E c=2o()-U.2M;U.1C-=c;8(U.3t){U.3t.1C-=c}8(U.3u){U.3u.1C-=c}3Z(U,K)}8(!z.26&&!z.20){8(b){1u.3v+=2o()-1u.2M}}8(!z.26){8(7.M.W){7.M.W.36(2z(\'6Q\',F))}}z.26=I;8(7.M.4u){E d=7.M.2L-1u.3v,3b=2J-1I.2A(d*2J/7.M.2L);7.M.4u.1g($13,3b,d)}G I});y.12(H(\'1H\',F),C(e,b,c,d){e.1f();1u=3s(1u);E v=[b,c,d],t=[\'2N\',\'27\',\'3c\'],a=3d(v,t);b=a[0];c=a[1];d=a[2];8(b!=\'V\'&&b!=\'Y\'){b=z.2b}8(!Z(c)){c=0}8(!1l(d)){d=K}8(d){z.2d=K;7.M.1H=I}8(!7.M.1H){e.2e();G 18(F,\'3w 4x: 2p 3e.\')}8(z.26){8(7.M.W){7.M.W.2O(2z(\'4x\',F));7.M.W.2O(2z(\'6Q\',F))}}z.26=K;1u.2M=2o();E f=7.M.2L+c;41=f-1u.3v;3b=2J-1I.2A(41*2J/f);8(7.M.1e){1u.1e=7U(C(){E a=2o()-1u.2M+1u.3v,3b=1I.2A(a*2J/f);7.M.1e.4y.1g(7.M.1e.2q[0],3b)},7.M.1e.5w)}1u.M=7V(C(){8(7.M.1e){7.M.1e.4y.1g(7.M.1e.2q[0],2J)}8(7.M.4v){7.M.4v.1g($13,3b,41)}8(z.20){y.R(H(\'1H\',F),b)}O{y.R(H(b,F),7.M)}},41);8(7.M.4t){7.M.4t.1g($13,3b,41)}G I});y.12(H(\'3f\',F),C(e){e.1f();8(U.2d){U.2d=K;z.26=K;z.20=I;U.2M=2o();2P(U)}O{y.R(H(\'1H\',F))}G I});y.12(H(\'V\',F)+\' \'+H(\'Y\',F),C(e,b,f,g,h){e.1f();8(z.2d||y.2f(\':3r\')){e.2e();G 18(F,\'3w 4x 7W 3r: 2p 3e.\')}E i=(Z(7.D.4z))?7.D.4z:7.D.L+1;8(i>J.P){e.2e();G 18(F,\'2p 6R D (\'+J.P+\' P, \'+i+\' 6S): 2p 3e.\')}E v=[b,f,g,h],t=[\'2g\',\'27/2N\',\'C\',\'3c\'],a=3d(v,t);b=a[0];f=a[1];g=a[2];h=a[3];E k=e.5x.17(F.3x.42.S);8(!1D(b)){b={}}8(1o(g)){b.3g=g}8(1l(h)){b.3y=h}b=$.1N(I,{},7[k],b);8(b.5y&&!b.5y.1g($13,k)){e.2e();G 18(F,\'7X "5y" 7Y K.\')}8(!Z(f)){8(7.D.1t!=\'*\'){f=\'L\'}O{E m=[f,b.D,7[k].D];1j(E a=0,l=m.S;a<l;a++){8(Z(m[a])||m[a]==\'6T\'||m[a]==\'L\'){f=m[a];16}}}1B(f){Q\'6T\':e.2e();G y.1Q(H(k+\'7Z\',F),[b,g]);16;Q\'L\':8(!7.D.T.1c&&7.D.1t==\'*\'){f=7.D.L}16}}8(U.2d){y.R(H(\'3f\',F));y.R(H(\'3y\',F),[k,[b,f,g]]);e.2e();G 18(F,\'3w 80 3e.\')}8(b.1C>0){8(z.20){8(b.3y){y.R(H(\'3y\',F),[k,[b,f,g]])}e.2e();G 18(F,\'3w 81 3e.\')}}1u.3v=0;y.R(H(\'6U\'+k,F),[b,f]);8(7.2n){E s=7.2n,c=[b,f];1j(E j=0,l=s.S;j<l;j++){E d=k;8(!s[j][2]){d=(d==\'V\')?\'Y\':\'V\'}8(!s[j][1]){c[0]=s[j][0].1Q(\'3o\',[\'4A\',d])}c[1]=f+s[j][3];s[j][0].R(\'3o\',[\'6U\'+d,c])}}G I});y.12(H(\'82\',F),C(e,b,c){e.1f();E d=y.14();8(!7.1T){8(J.11==0){8(7.3z){y.R(H(\'Y\',F),J.P-1)}G e.2e()}}1U(d,7);8(!Z(c)){8(7.D.T.1c){c=4B(d,7,J.P-1)}O 8(7.D.1t!=\'*\'){E f=(Z(b.D))?b.D:5z(y,7);c=6V(d,7,J.P-1,f)}O{c=7.D.L}c=4C(c,7,b.D,$13)}8(!7.1T){8(J.P-c<J.11){c=J.P-J.11}}7.D.T.1Z=7.D.L;8(7.D.T.1c){E g=2x(32(d,7,J.P-c),7,7.D.T.2c,$13);8(7.D.L+c<=g&&c<J.P){c++;g=2x(32(d,7,J.P-c),7,7.D.T.2c,$13)}7.D.L=g}O 8(7.D.1t!=\'*\'){E g=3U(d,7,J.P-c);7.D.L=2x(g,7,7.D.T.2c,$13)}1U(d,7,I);8(c==0){e.2e();G 18(F,\'0 D 4D 1M: 2p 3e.\')}18(F,\'6W \'+c+\' D 5A.\');J.11+=c;2h(J.11>=J.P){J.11-=J.P}8(!7.1T){8(J.11==0&&b.4E){b.4E.1g($13,\'V\')}8(!7.3z){3A(7,J.11,F)}}y.14().17(J.P-c,J.P).83(y);8(J.P<7.D.L+c){y.14().17(0,(7.D.L+c)-J.P).4F(I).43(y)}E d=y.14(),3h=6X(d,7,c),2i=6Y(d,7),1Y=d.1O(c-1),21=3h.3i(),2r=2i.3i();1U(d,7);E h=0,2B=0;8(7.1A){E p=4G(2i,7);h=p[0];2B=p[1]}E i=(h<0)?7.1i[7.d[3]]:0;E j=K,2Q=$();8(7.D.L<c){2Q=d.17(7.D.T.1Z,c);8(b.1V==\'6Z\'){E k=7.D[7.d[\'N\']];j=2Q;1Y=2r;5B(j);7.D[7.d[\'N\']]=\'1c\'}}E l=K,3B=2R(d.17(0,c),7,\'N\'),2j=4H(4I(2i,7,I),7,!7.1R),3C=0,28={},4J={},2s={},2S={},4K={},2T={},5C={},2U=5D(b,7,c,3B);1B(b.1V){Q\'1J\':Q\'1J-1w\':3C=2R(d.17(0,7.D.L),7,\'N\');16}8(j){7.D[7.d[\'N\']]=k}1U(d,7,I);8(2B>=0){1U(21,7,7.1i[7.d[1]])}8(h>=0){1U(1Y,7,7.1i[7.d[3]])}8(7.1A){7.1i[7.d[1]]=2B;7.1i[7.d[3]]=h}2T[7.d[\'1n\']]=-(3B-i);5C[7.d[\'1n\']]=-(3C-i);4J[7.d[\'1n\']]=2j[7.d[\'N\']];E m=C(){},1P=C(){},1E=C(){},3D=C(){},2C=C(){},5E=C(){},1F=C(){},3E=C(){},1x=C(){},1y=C(){},1K=C(){};1B(b.1V){Q\'3j\':Q\'1J\':Q\'1J-1w\':Q\'22\':Q\'22-1w\':l=y.4F(I).43($1s);16}1B(b.1V){Q\'3j\':Q\'22\':Q\'22-1w\':l.14().17(0,c).2t();l.14().17(7.D.T.1Z).2t();16;Q\'1J\':Q\'1J-1w\':l.14().17(7.D.L).2t();l.X(5C);16}y.X(2T);U=44(2U,b.2k);28[7.d[\'1n\']]=(7.1R)?7.1i[7.d[3]]:0;8(7[7.d[\'N\']]==\'1c\'||7[7.d[\'1d\']]==\'1c\'){m=C(){$1s.X(2j)};1P=C(){U.19.1b([$1s,2j])}}8(7.1R){8(2r.5F(1Y).S){2s[7.d[\'1S\']]=1Y.1m(\'29\');8(h<0){1Y.X(2s)}O{1F=C(){1Y.X(2s)};3E=C(){U.19.1b([1Y,2s])}}}1B(b.1V){Q\'1J\':Q\'1J-1w\':l.14().1O(c-1).X(2s);16}8(2r.5F(21).S){2S[7.d[\'1S\']]=21.1m(\'29\');1E=C(){21.X(2S)};3D=C(){U.19.1b([21,2S])}}8(2B>=0){4K[7.d[\'1S\']]=2r.1m(\'29\')+7.1i[7.d[1]];2C=C(){2r.X(4K)};5E=C(){U.19.1b([2r,4K])}}}1K=C(){y.X(28)};E n=7.D.L+c-J.P;1y=C(){8(n>0){y.14().17(J.P).2t();3h=$(y.14().17(J.P-(7.D.L-n)).3F().70(y.14().17(0,n).3F()))}5G(j);8(7.1R){E a=y.14().1O(7.D.L+c-1);a.X(7.d[\'1S\'],a.1m(\'29\'))}};E o=5H(3h,2Q,2i,c,\'V\',2U,2j);1x=C(){5I(y,l,b);z.20=K;2a.3g=45($13,b,\'3g\',o,2a);2D=5J(y,2D,F);8(!z.26){y.R(H(\'1H\',F))}};z.20=I;1u=3s(1u);2a.3G=45($13,b,\'3G\',o,2a);1B(b.1V){Q\'3Y\':y.X(28);m();1E();2C();1F();1K();1y();1x();16;Q\'1w\':U.19.1b([y,{\'1L\':0},C(){m();1E();2C();1F();1K();1y();U=44(2U,b.2k);U.19.1b([y,{\'1L\':1},1x]);2P(U)}]);16;Q\'3j\':y.X({\'1L\':0});U.19.1b([l,{\'1L\':0}]);U.19.1b([y,{\'1L\':1},1x]);1P();1E();2C();1F();1K();1y();16;Q\'1J\':U.19.1b([l,28,C(){1E();2C();1F();1K();1y();1x()}]);1P();16;Q\'1J-1w\':U.19.1b([y,{\'1L\':0}]);U.19.1b([l,28,C(){y.X({\'1L\':1});1E();2C();1F();1K();1y();1x()}]);1P();16;Q\'22\':U.19.1b([l,4J,1x]);1P();1E();2C();1F();1K();1y();16;Q\'22-1w\':y.X({\'1L\':0});U.19.1b([y,{\'1L\':1}]);U.19.1b([l,4J,1x]);1P();1E();2C();1F();1K();1y();16;2y:U.19.1b([y,28,C(){1y();1x()}]);1P();3D();5E();3E();16}2P(U);5K(7.25,y,F);y.R(H(\'3H\',F),[K,2j]);G I});y.12(H(\'84\',F),C(e,c,d){e.1f();E f=y.14();8(!7.1T){8(J.11==7.D.L){8(7.3z){y.R(H(\'V\',F),J.P-1)}G e.2e()}}1U(f,7);8(!Z(d)){8(7.D.1t!=\'*\'){E g=(Z(c.D))?c.D:5z(y,7);d=71(f,7,0,g)}O{d=7.D.L}d=4C(d,7,c.D,$13)}E h=(J.11==0)?J.P:J.11;8(!7.1T){8(7.D.T.1c){E i=32(f,7,d),g=4B(f,7,h-1)}O{E i=7.D.L,g=7.D.L}8(d+i>h){d=h-g}}7.D.T.1Z=7.D.L;8(7.D.T.1c){E i=2x(5L(f,7,d,h),7,7.D.T.2c,$13);2h(7.D.L-d>=i&&d<J.P){d++;i=2x(5L(f,7,d,h),7,7.D.T.2c,$13)}7.D.L=i}O 8(7.D.1t!=\'*\'){E i=3U(f,7,d);7.D.L=2x(i,7,7.D.T.2c,$13)}1U(f,7,I);8(d==0){e.2e();G 18(F,\'0 D 4D 1M: 2p 3e.\')}18(F,\'6W \'+d+\' D 72.\');J.11-=d;2h(J.11<0){J.11+=J.P}8(!7.1T){8(J.11==7.D.L&&c.4E){c.4E.1g($13,\'Y\')}8(!7.3z){3A(7,J.11,F)}}8(J.P<7.D.L+d){y.14().17(0,(7.D.L+d)-J.P).4F(I).43(y)}E f=y.14(),3h=73(f,7),2i=74(f,7,d),1Y=f.1O(d-1),21=3h.3i(),2r=2i.3i();1U(f,7);E j=0,2B=0;8(7.1A){E p=4G(2i,7);j=p[0];2B=p[1]}E k=K,2Q=$();8(7.D.T.1Z<d){2Q=f.17(7.D.T.1Z,d);8(c.1V==\'6Z\'){E l=7.D[7.d[\'N\']];k=2Q;1Y=21;5B(k);7.D[7.d[\'N\']]=\'1c\'}}E m=K,3B=2R(f.17(0,d),7,\'N\'),2j=4H(4I(2i,7,I),7,!7.1R),3C=0,28={},4L={},2s={},2S={},2T={},2U=5D(c,7,d,3B);1B(c.1V){Q\'22\':Q\'22-1w\':3C=2R(f.17(0,7.D.T.1Z),7,\'N\');16}8(k){7.D[7.d[\'N\']]=l}8(7.1A){8(7.1i[7.d[1]]<0){7.1i[7.d[1]]=0}}1U(f,7,I);1U(21,7,7.1i[7.d[1]]);8(7.1A){7.1i[7.d[1]]=2B;7.1i[7.d[3]]=j}2T[7.d[\'1n\']]=(7.1R)?7.1i[7.d[3]]:0;E n=C(){},1P=C(){},1E=C(){},3D=C(){},1F=C(){},3E=C(){},1x=C(){},1y=C(){},1K=C(){};1B(c.1V){Q\'3j\':Q\'1J\':Q\'1J-1w\':Q\'22\':Q\'22-1w\':m=y.4F(I).43($1s);m.14().17(7.D.T.1Z).2t();16}1B(c.1V){Q\'3j\':Q\'1J\':Q\'1J-1w\':y.X(\'3X\',1);m.X(\'3X\',0);16}U=44(2U,c.2k);28[7.d[\'1n\']]=-3B;4L[7.d[\'1n\']]=-3C;8(j<0){28[7.d[\'1n\']]+=j}8(7[7.d[\'N\']]==\'1c\'||7[7.d[\'1d\']]==\'1c\'){n=C(){$1s.X(2j)};1P=C(){U.19.1b([$1s,2j])}}8(7.1R){E o=2r.1m(\'29\');8(2B>=0){o+=7.1i[7.d[1]]}2r.X(7.d[\'1S\'],o);8(1Y.5F(21).S){2S[7.d[\'1S\']]=21.1m(\'29\')}1E=C(){21.X(2S)};3D=C(){U.19.1b([21,2S])};E q=1Y.1m(\'29\');8(j>0){q+=7.1i[7.d[3]]}2s[7.d[\'1S\']]=q;1F=C(){1Y.X(2s)};3E=C(){U.19.1b([1Y,2s])}}1K=C(){y.X(2T)};E r=7.D.L+d-J.P;1y=C(){8(r>0){y.14().17(J.P).2t()}E a=y.14().17(0,d).43(y).3i();8(r>0){2i=3I(f,7)}5G(k);8(7.1R){8(J.P<7.D.L+d){E b=y.14().1O(7.D.L-1);b.X(7.d[\'1S\'],b.1m(\'29\')+7.1i[7.d[3]])}a.X(7.d[\'1S\'],a.1m(\'29\'))}};E s=5H(3h,2Q,2i,d,\'Y\',2U,2j);1x=C(){y.X(\'3X\',y.1m(\'5q\').3X);5I(y,m,c);z.20=K;2a.3g=45($13,c,\'3g\',s,2a);2D=5J(y,2D,F);8(!z.26){y.R(H(\'1H\',F))}};z.20=I;1u=3s(1u);2a.3G=45($13,c,\'3G\',s,2a);1B(c.1V){Q\'3Y\':y.X(28);n();1E();1F();1K();1y();1x();16;Q\'1w\':U.19.1b([y,{\'1L\':0},C(){n();1E();1F();1K();1y();U=44(2U,c.2k);U.19.1b([y,{\'1L\':1},1x]);2P(U)}]);16;Q\'3j\':y.X({\'1L\':0});U.19.1b([m,{\'1L\':0}]);U.19.1b([y,{\'1L\':1},1x]);1P();1E();1F();1K();1y();16;Q\'1J\':y.X(7.d[\'1n\'],$1s[7.d[\'N\']]());U.19.1b([y,2T,1x]);1P();1E();1F();1y();16;Q\'1J-1w\':y.X(7.d[\'1n\'],$1s[7.d[\'N\']]());U.19.1b([m,{\'1L\':0}]);U.19.1b([y,2T,1x]);1P();1E();1F();1y();16;Q\'22\':U.19.1b([m,4L,1x]);1P();1E();1F();1K();1y();16;Q\'22-1w\':y.X({\'1L\':0});U.19.1b([y,{\'1L\':1}]);U.19.1b([m,4L,1x]);1P();1E();1F();1K();1y();16;2y:U.19.1b([y,28,C(){1K();1y();1x()}]);1P();3D();3E();16}2P(U);5K(7.25,y,F);y.R(H(\'3H\',F),[K,2j]);G I});y.12(H(\'3k\',F),C(e,b,c,d,f,g,h){e.1f();E v=[b,c,d,f,g,h],t=[\'2N/27/2g\',\'27\',\'3c\',\'2g\',\'2N\',\'C\'],a=3d(v,t);f=a[3];g=a[4];h=a[5];b=3J(a[0],a[1],a[2],J,y);8(b==0){G K}8(!1D(f)){f=K}8(z.20){8(!1D(f)||f.1C>0){G K}}8(g!=\'V\'&&g!=\'Y\'){8(7.1T){g=(b<=J.P/2)?\'Y\':\'V\'}O{g=(J.11==0||J.11>b)?\'Y\':\'V\'}}8(g==\'V\'){b=J.P-b}y.R(H(g,F),[f,b,h]);G I});y.12(H(\'85\',F),C(e,a,b){e.1f();E c=y.1Q(H(\'46\',F));G y.1Q(H(\'5M\',F),[c-1,a,\'V\',b])});y.12(H(\'86\',F),C(e,a,b){e.1f();E c=y.1Q(H(\'46\',F));G y.1Q(H(\'5M\',F),[c+1,a,\'Y\',b])});y.12(H(\'5M\',F),C(e,a,b,c,d){e.1f();8(!Z(a)){a=y.1Q(H(\'46\',F))}E f=7.1a.D||7.D.L,1X=1I.2A(J.P/f)-1;8(a<0){a=1X}8(a>1X){a=0}G y.1Q(H(\'3k\',F),[a*f,0,I,b,c,d])});y.12(H(\'75\',F),C(e,s){e.1f();8(s){s=3J(s,0,I,J,y)}O{s=0}s+=J.11;8(s!=0){8(D.P>0){2h(s>J.P){s-=J.P}}y.87(y.14().17(s,J.P))}G I});y.12(H(\'2n\',F),C(e,s){e.1f();8(s){s=5i(s)}O 8(7.2n){s=7.2n}O{G 18(F,\'6q 88 4D 2n.\')}E n=y.1Q(H(\'4m\',F)),x=I;1j(E j=0,l=s.S;j<l;j++){8(!s[j][0].1Q(H(\'3k\',F),[n,s[j][3],I])){x=K}}G x});y.12(H(\'3y\',F),C(e,a,b){e.1f();8(1o(a)){a.1g($13,2D)}O 8(2V(a)){2D=a}O 8(!1G(a)){2D.1b([a,b])}G 2D});y.12(H(\'89\',F),C(e,b,c,d,f){e.1f();E v=[b,c,d,f],t=[\'2N/2g\',\'2N/27/2g\',\'3c\',\'27\'],a=3d(v,t);b=a[0];c=a[1];d=a[2];f=a[3];8(1D(b)&&!2u(b)){b=$(b)}O 8(1p(b)){b=$(b)}8(!2u(b)||b.S==0){G 18(F,\'2p a 5N 2g.\')}8(1G(c)){c=\'4M\'}4w(b,7);5r(b,7);E g=c,47=\'47\';8(c==\'4M\'){8(d){8(J.11==0){c=J.P-1;47=\'76\'}O{c=J.11;J.11+=b.S}8(c<0){c=0}}O{c=J.P-1;47=\'76\'}}O{c=3J(c,f,d,J,y)}8(g!=\'4M\'&&!d){8(c<J.11){J.11+=b.S}}8(J.11>=J.P){J.11-=J.P}E h=y.14().1O(c);8(h.S){h[47](b)}O{y.77(b)}J.P=y.14().S;y.R(H(\'4N\',F));y.R(H(\'5O\',F));G I});y.12(H(\'78\',F),C(e,c,d,f){e.1f();E v=[c,d,f],t=[\'2N/27/2g\',\'3c\',\'27\'],a=3d(v,t);c=a[0];d=a[1];f=a[2];E g=K;8(c 2W $&&c.S>1){h=$();c.1W(C(i,a){E b=y.R(H(\'78\',F),[$(1k),d,f]);8(b)h=h.8a(b)});G h}8(1G(c)||c==\'4M\'){h=y.14().3i()}O{c=3J(c,f,d,J,y);E h=y.14().1O(c);8(h.S){8(c<J.11)J.11-=h.S}}8(h&&h.S){h.8b();J.P=y.14().S;y.R(H(\'4N\',F))}G h});y.12(H(\'3G\',F)+\' \'+H(\'3g\',F),C(e,a){e.1f();E b=e.5x.17(F.3x.42.S);8(2V(a)){2a[b]=a}8(1o(a)){2a[b].1b(a)}G 2a[b]});y.12(H(\'4m\',F),C(e,a){e.1f();8(J.11==0){E b=0}O{E b=J.P-J.11}8(1o(a)){a.1g($13,b)}G b});y.12(H(\'46\',F),C(e,a){e.1f();E b=7.1a.D||7.D.L,1X=1I.2A(J.P/b-1),2l;8(J.11==0){2l=0}O 8(J.11<J.P%b){2l=0}O 8(J.11==b&&!7.1T){2l=1X}O{2l=1I.79((J.P-J.11)/b)}8(2l<0){2l=0}8(2l>1X){2l=1X}8(1o(a)){a.1g($13,2l)}G 2l});y.12(H(\'8c\',F),C(e,a){e.1f();E b=3I(y.14(),7);8(1o(a)){a.1g($13,b)}G b});y.12(H(\'17\',F),C(e,f,l,b){e.1f();8(J.P==0){G K}E v=[f,l,b],t=[\'27\',\'27\',\'C\'],a=3d(v,t);f=(Z(a[0]))?a[0]:0;l=(Z(a[1]))?a[1]:J.P;b=a[2];f+=J.11;l+=J.11;8(D.P>0){2h(f>J.P){f-=J.P}2h(l>J.P){l-=J.P}2h(f<0){f+=J.P}2h(l<0){l+=J.P}}E c=y.14(),$i;8(l>f){$i=c.17(f,l)}O{$i=$(c.17(f,J.P).3F().70(c.17(0,l).3F()))}8(1o(b)){b.1g($13,$i)}G $i});y.12(H(\'26\',F)+\' \'+H(\'2d\',F)+\' \'+H(\'20\',F),C(e,a){e.1f();E b=e.5x.17(F.3x.42.S),5P=z[b];8(1o(a)){a.1g($13,5P)}G 5P});y.12(H(\'4A\',F),C(e,a,b,c){e.1f();E d=K;8(1o(a)){a.1g($13,7)}O 8(1D(a)){31=$.1N(I,{},31,a);8(b!==K)d=I;O 7=$.1N(I,{},7,a)}O 8(!1G(a)){8(1o(b)){E f=4O(\'7.\'+a);8(1G(f)){f=\'\'}b.1g($13,f)}O 8(!1G(b)){8(2X c!==\'3c\')c=I;4O(\'31.\'+a+\' = b\');8(c!==K)d=I;O 4O(\'7.\'+a+\' = b\')}O{G 4O(\'7.\'+a)}}8(d){1U(y.14(),7);y.57(31);y.5Q();E g=4P(y,7);y.R(H(\'3H\',F),[I,g])}G 7});y.12(H(\'5O\',F),C(e,a,b){e.1f();8(1G(a)){a=$(\'8d\')}O 8(1p(a)){a=$(a)}8(!2u(a)||a.S==0){G 18(F,\'2p a 5N 2g.\')}8(!1p(b)){b=\'a.6p\'}a.8e(b).1W(C(){E h=1k.7a||\'\';8(h.S>0&&y.14().7b($(h))!=-1){$(1k).23(\'5R\').5R(C(e){e.2E();y.R(H(\'3k\',F),h)})}});G I});y.12(H(\'3H\',F),C(e,b,c){e.1f();8(!7.1a.1z){G}E d=7.1a.D||7.D.L,4Q=1I.2A(J.P/d);8(b){8(7.1a.3K){7.1a.1z.14().2t();7.1a.1z.1W(C(){1j(E a=0;a<4Q;a++){E i=y.14().1O(3J(a*d,0,I,J,y));$(1k).77(7.1a.3K.1g(i[0],a+1))}})}7.1a.1z.1W(C(){$(1k).14().23(7.1a.3L).1W(C(a){$(1k).12(7.1a.3L,C(e){e.2E();y.R(H(\'3k\',F),[a*d,-7.1a.4R,I,7.1a])})})})}E f=y.1Q(H(\'46\',F))+7.1a.4R;8(f>=4Q){f=0}8(f<0){f=4Q-1}7.1a.1z.1W(C(){$(1k).14().2O(2z(\'7c\',F)).1O(f).36(2z(\'7c\',F))});G I});y.12(H(\'4N\',F),C(e){E a=7.D.L,2F=y.14(),2w=5b($1s,7,\'N\');J.P=2F.S;7.4p=5c(7,2w);8(z.4q){7[7.d[\'N\']]=4r(2w,z.4q)}8(7.2m){7.D.N=7.D.3M.N;7.D.1d=7.D.3M.1d;7=5e(7,2F,2w);a=7.D.L;5s(7,2F)}O 8(7.D.T.1c){a=32(2F,7,0)}O 8(7.D.1t!=\'*\'){a=3U(2F,7,0)}8(!7.1T&&J.11!=0&&a>J.11){8(7.D.T.1c){E b=4B(2F,7,J.11)-J.11}O 8(7.D.1t!=\'*\'){E b=7d(2F,7,J.11)-J.11}O{E b=7.D.L-J.11}18(F,\'8f 8g-1T: 8h \'+b+\' D 5A.\');y.R(H(\'V\',F),b)}7.D.L=2x(a,7,7.D.T.2c,$13);7.D.T.1Z=7.D.L;7=5g(7,2F);E c=4P(y,7);y.R(H(\'3H\',F),[I,c]);4S(7,J.P,F);3A(7,J.11,F);G c});y.12(H(\'4n\',F),C(e,a){e.1f();1u=3s(1u);y.1m(\'56\',K);y.R(H(\'5v\',F));8(a){y.R(H(\'75\',F))}1U(y.14(),7);8(7.2m){y.14().1W(C(){$(1k).X($(1k).1m(\'7e\'))})}y.X(y.1m(\'5q\'));y.5t();y.5S();$1s.8i(y);G I});y.12(H(\'18\',F),C(e){18(F,\'3w N: \'+7.N);18(F,\'3w 1d: \'+7.1d);18(F,\'7f 8j: \'+7.D.N);18(F,\'7f 8k: \'+7.D.1d);18(F,\'48 4a D L: \'+7.D.L);8(7.M.1H){18(F,\'48 4a D 5T 8l: \'+7.M.D)}8(7.V.W){18(F,\'48 4a D 5T 5A: \'+7.V.D)}8(7.Y.W){18(F,\'48 4a D 5T 72: \'+7.Y.D)}G F.18});y.12(\'3o\',C(e,n,o){e.1f();G y.1Q(H(n,F),o)})};y.5t=C(){y.23(H(\'\',F));y.23(H(\'\',F,K));y.23(\'3o\')};y.5Q=C(){y.5S();4S(7,J.P,F);3A(7,J.11,F);8(7.M.2G){E b=3N(7.M.2G);$1s.12(H(\'4T\',F,K),C(){y.R(H(\'3a\',F),b)}).12(H(\'4U\',F,K),C(){y.R(H(\'3f\',F))})}8(7.M.W){7.M.W.12(H(7.M.3L,F,K),C(e){e.2E();E a=K,b=2H;8(z.26){a=\'1H\'}O 8(7.M.4V){a=\'3a\';b=3N(7.M.4V)}8(a){y.R(H(a,F),b)}})}8(7.V.W){7.V.W.12(H(7.V.3L,F,K),C(e){e.2E();y.R(H(\'V\',F))});8(7.V.2G){E b=3N(7.V.2G);7.V.W.12(H(\'4T\',F,K),C(){y.R(H(\'3a\',F),b)}).12(H(\'4U\',F,K),C(){y.R(H(\'3f\',F))})}}8(7.Y.W){7.Y.W.12(H(7.Y.3L,F,K),C(e){e.2E();y.R(H(\'Y\',F))});8(7.Y.2G){E b=3N(7.Y.2G);7.Y.W.12(H(\'4T\',F,K),C(){y.R(H(\'3a\',F),b)}).12(H(\'4U\',F,K),C(){y.R(H(\'3f\',F))})}}8(7.1a.1z){8(7.1a.2G){E b=3N(7.1a.2G);7.1a.1z.12(H(\'4T\',F,K),C(){y.R(H(\'3a\',F),b)}).12(H(\'4U\',F,K),C(){y.R(H(\'3f\',F))})}}8(7.V.2Y||7.Y.2Y){$(4b).12(H(\'7g\',F,K,I,I),C(e){E k=e.7h;8(k==7.Y.2Y){e.2E();y.R(H(\'Y\',F))}8(k==7.V.2Y){e.2E();y.R(H(\'V\',F))}})}8(7.1a.4W){$(4b).12(H(\'7g\',F,K,I,I),C(e){E k=e.7h;8(k>=49&&k<58){k=(k-49)*7.D.L;8(k<=J.P){e.2E();y.R(H(\'3k\',F),[k,0,I,7.1a])}}})}8(7.V.4X||7.Y.4X){2K(\'4c 4d-7i\',\'4c 8m-7i\');8($.1r.4d){E c=(7.V.4X)?C(){y.R(H(\'V\',F))}:2H,4e=(7.Y.4X)?C(){y.R(H(\'Y\',F))}:2H;8(4e||4e){8(!z.4d){z.4d=I;E d={\'8n\':30,\'8o\':30,\'8p\':I};1B(7.2b){Q\'4o\':Q\'5U\':d.8q=c;d.8r=4e;16;2y:d.8s=4e;d.8t=c}$1s.4d(d)}}}}8($.1r.1q){E f=\'8u\'8v 3l;8((f&&7.1q.4f)||(!f&&7.1q.5V)){E g=$.1N(I,{},7.V,7.1q),7j=$.1N(I,{},7.Y,7.1q),5W=C(){y.R(H(\'V\',F),[g])},5X=C(){y.R(H(\'Y\',F),[7j])};1B(7.2b){Q\'4o\':Q\'5U\':7.1q.2I.8w=5X;7.1q.2I.8x=5W;16;2y:7.1q.2I.8y=5X;7.1q.2I.8z=5W}8(z.1q){y.1q(\'4n\')}$1s.1q(7.1q.2I);$1s.X(\'7k\',\'8A\');z.1q=I}}8($.1r.1h){8(7.V.1h){2K(\'7l V.1h 7m\',\'4c 1h 4A 2g\');7.V.1h=2H;7.1h={D:5Y(7.V.1h)}}8(7.Y.1h){2K(\'7l Y.1h 7m\',\'4c 1h 4A 2g\');7.Y.1h=2H;7.1h={D:5Y(7.Y.1h)}}8(7.1h){E h=$.1N(I,{},7.V,7.1h),7n=$.1N(I,{},7.Y,7.1h);8(z.1h){$1s.23(H(\'1h\',F,K))}$1s.12(H(\'1h\',F,K),C(e,a){e.2E();8(a>0){y.R(H(\'V\',F),[h])}O{y.R(H(\'Y\',F),[7n])}});z.1h=I}}8(7.M.1H){y.R(H(\'1H\',F),7.M.5Z)}8(z.6B){E i=$(3l),61=0,62=0;i.12(H(\'8B\',F,K,I,I),C(e){E a=i.N(),63=i.1d();8(a!=61||63!=62){y.R(H(\'5v\',F));8(7.M.64&&!z.26){y.R(H(\'1H\',F))}1U(y.14(),7);y.R(H(\'4N\',F));61=a;62=63}})}};y.5S=C(){E a=H(\'\',F),3O=H(\'\',F,K);65=H(\'\',F,K,I,I);$(4b).23(65);$(3l).23(65);$1s.23(3O);8(7.M.W){7.M.W.23(3O)}8(7.V.W){7.V.W.23(3O)}8(7.Y.W){7.Y.W.23(3O)}8(7.1a.1z){7.1a.1z.23(3O);8(7.1a.3K){7.1a.1z.14().2t()}}8(z.1q){y.1q(\'4n\');$1s.X(\'7k\',\'2y\');z.1q=K}8(z.1h){z.1h=K}4S(7,\'4g\',F);3A(7,\'2O\',F)};8(1l(w)){w={\'18\':w}}E z={\'2b\':\'Y\',\'26\':I,\'20\':K,\'2d\':K,\'1h\':K,\'1q\':K},J={\'P\':y.14().S,\'11\':0},1u={\'M\':2H,\'1e\':2H,\'2M\':2o(),\'3v\':0},U={\'2d\':K,\'1C\':0,\'2M\':0,\'2k\':\'\',\'19\':[]},2a={\'3G\':[],\'3g\':[]},2D=[],F=$.1N(I,{},$.1r.1v.7o,w),7={},31=$.1N(I,{},u),$1s=y.8C(\'<\'+F.66.54+\' 8D="\'+F.66.7p+\'" />\').68();F.4l=y.4l;F.3S=$.1r.1v.3S++;y.57(31,I,55);y.6J();y.6P();y.5Q();8(2V(7.D.3m)){E A=7.D.3m}O{E A=[];8(7.D.3m!=0){A.1b(7.D.3m)}}8(7.25){A.8E(4h(7q(7.25),10))}8(A.S>0){1j(E a=0,l=A.S;a<l;a++){E s=A[a];8(s==0){69}8(s===I){s=3l.8F.7a;8(s.S<1){69}}O 8(s===\'7r\'){s=1I.4i(1I.7r()*J.P)}8(y.1Q(H(\'3k\',F),[s,0,I,{1V:\'3Y\'}])){16}}}E B=4P(y,7),7s=3I(y.14(),7);8(7.7t){7.7t.1g($13,{\'N\':B.N,\'1d\':B.1d,\'D\':7s})}y.R(H(\'3H\',F),[I,B]);y.R(H(\'5O\',F));8(F.18){y.R(H(\'18\',F))}G y};$.1r.1v.3S=1;$.1r.1v.5a={\'2n\':K,\'3z\':I,\'1T\':I,\'2m\':K,\'2b\':\'1n\',\'D\':{\'3m\':0},\'1M\':{\'2k\':\'8G\',\'1C\':6E,\'2G\':K,\'3L\':\'5R\',\'3y\':K}};$.1r.1v.7o={\'18\':K,\'3x\':{\'42\':\'\',\'7u\':\'8H\'},\'66\':{\'54\':\'8I\',\'7p\':\'8J\'},\'6a\':{}};$.1r.1v.7v=C(a){G\'<a 8K="#"><7w>\'+a+\'</7w></a>\'};$.1r.1v.7x=C(a){$(1k).X(\'N\',a+\'%\')};$.1r.1v.25={3F:C(n){n+=\'=\';E b=4b.25.3P(\';\');1j(E a=0,l=b.S;a<l;a++){E c=b[a];2h(c.8L(0)==\' \'){c=c.17(1)}8(c.3Q(n)==0){G c.17(n.S)}}G 0},6b:C(n,v,d){E e="";8(d){E a=6c 7y();a.8M(a.2o()+(d*24*60*60*8N));e="; 8O="+a.8P()}4b.25=n+\'=\'+v+e+\'; 8Q=/\'},2t:C(n){$.1r.1v.25.6b(n,"",-1)}};C 44(d,e){G{19:[],1C:d,8R:d,2k:e,2M:2o()}}C 2P(s){8(1D(s.3t)){2P(s.3t)}1j(E a=0,l=s.19.S;a<l;a++){E b=s.19[a];8(!b){69}8(b[3]){b[0].5u()}b[0].8S(b[1],{8T:b[2],1C:s.1C,2k:s.2k})}8(1D(s.3u)){2P(s.3u)}}C 3Z(s,c){8(!1l(c)){c=I}8(1D(s.3t)){3Z(s.3t,c)}1j(E a=0,l=s.19.S;a<l;a++){E b=s.19[a];b[0].5u(I);8(c){b[0].X(b[1]);8(1o(b[2])){b[2]()}}}8(1D(s.3u)){3Z(s.3u,c)}}C 5I(a,b,o){8(b){b.2t()}1B(o.1V){Q\'1w\':Q\'3j\':Q\'1J-1w\':Q\'22-1w\':a.X(\'1t\',\'\');16}}C 45(d,o,b,a,c){8(o[b]){o[b].1g(d,a)}8(c[b].S){1j(E i=0,l=c[b].S;i<l;i++){c[b][i].1g(d,a)}}G[]}C 5J(a,q,c){8(q.S){a.R(H(q[0][0],c),q[0][1]);q.8U()}G q}C 5B(b){b.1W(C(){E a=$(1k);a.1m(\'7z\',a.2f(\':3r\')).4g()})}C 5G(b){8(b){b.1W(C(){E a=$(1k);8(!a.1m(\'7z\')){a.4j()}})}}C 3s(t){8(t.M){8V(t.M)}8(t.1e){8W(t.1e)}G t}C 5H(a,b,c,d,e,f,g){G{\'N\':g.N,\'1d\':g.1d,\'D\':{\'1Z\':a,\'8X\':b,\'6c\':c,\'L\':c},\'1M\':{\'D\':d,\'2b\':e,\'1C\':f}}}C 5D(a,o,b,c){E d=a.1C;8(a.1V==\'3Y\'){G 0}8(d==\'M\'){d=o.1M.1C/o.1M.D*b}O 8(d<10){d=c/d}8(d<1){G 0}8(a.1V==\'1w\'){d=d/2}G 1I.79(d)}C 4S(o,t,c){E a=(Z(o.D.4z))?o.D.4z:o.D.L+1;8(t==\'4j\'||t==\'4g\'){E f=t}O 8(a>t){18(c,\'2p 6R D (\'+t+\' P, \'+a+\' 6S): 8Y 8Z.\');E f=\'4g\'}O{E f=\'4j\'}E s=(f==\'4j\')?\'2O\':\'36\',h=2z(\'3r\',c);8(o.M.W){o.M.W[f]()[s](h)}8(o.V.W){o.V.W[f]()[s](h)}8(o.Y.W){o.Y.W[f]()[s](h)}8(o.1a.1z){o.1a.1z[f]()[s](h)}}C 3A(o,f,c){8(o.1T||o.3z)G;E a=(f==\'2O\'||f==\'36\')?f:K,4Y=2z(\'90\',c);8(o.M.W&&a){o.M.W[a](4Y)}8(o.V.W){E b=a||(f==0)?\'36\':\'2O\';o.V.W[b](4Y)}8(o.Y.W){E b=a||(f==o.D.L)?\'36\':\'2O\';o.Y.W[b](4Y)}}C 3R(a,b){8(1o(b)){b=b.1g(a)}O 8(1G(b)){b={}}G b}C 6r(a,b){b=3R(a,b);8(Z(b)){b={\'L\':b}}O 8(b==\'1c\'){b={\'L\':b,\'N\':b,\'1d\':b}}O 8(!1D(b)){b={}}G b}C 6s(a,b){b=3R(a,b);8(Z(b)){8(b<=50){b={\'D\':b}}O{b={\'1C\':b}}}O 8(1p(b)){b={\'2k\':b}}O 8(!1D(b)){b={}}G b}C 4Z(a,b){b=3R(a,b);8(1p(b)){E c=6d(b);8(c==-1){b=$(b)}O{b=c}}G b}C 6t(a,b){b=4Z(a,b);8(2u(b)){b={\'W\':b}}O 8(1l(b)){b={\'1H\':b}}O 8(Z(b)){b={\'2L\':b}}8(b.1e){8(1p(b.1e)||2u(b.1e)){b.1e={\'2q\':b.1e}}}G b}C 6F(a,b){8(1o(b.W)){b.W=b.W.1g(a)}8(1p(b.W)){b.W=$(b.W)}8(!1l(b.1H)){b.1H=I}8(!Z(b.5Z)){b.5Z=0}8(1G(b.4V)){b.4V=I}8(!1l(b.64)){b.64=I}8(!Z(b.2L)){b.2L=(b.1C<10)?91:b.1C*5}8(b.1e){8(1o(b.1e.2q)){b.1e.2q=b.1e.2q.1g(a)}8(1p(b.1e.2q)){b.1e.2q=$(b.1e.2q)}8(b.1e.2q){8(!1o(b.1e.4y)){b.1e.4y=$.1r.1v.7x}8(!Z(b.1e.5w)){b.1e.5w=50}}O{b.1e=K}}G b}C 59(a,b){b=4Z(a,b);8(2u(b)){b={\'W\':b}}O 8(Z(b)){b={\'2Y\':b}}G b}C 5h(a,b){8(1o(b.W)){b.W=b.W.1g(a)}8(1p(b.W)){b.W=$(b.W)}8(1p(b.2Y)){b.2Y=6d(b.2Y)}G b}C 6u(a,b){b=4Z(a,b);8(2u(b)){b={\'1z\':b}}O 8(1l(b)){b={\'4W\':b}}G b}C 6G(a,b){8(1o(b.1z)){b.1z=b.1z.1g(a)}8(1p(b.1z)){b.1z=$(b.1z)}8(!Z(b.D)){b.D=K}8(!1l(b.4W)){b.4W=K}8(!1o(b.3K)&&!51(b.3K)){b.3K=$.1r.1v.7v}8(!Z(b.4R)){b.4R=0}G b}C 6v(a,b){8(1o(b)){b=b.1g(a)}8(1G(b)){b={\'4f\':K}}8(3p(b)){b={\'4f\':b}}O 8(Z(b)){b={\'D\':b}}G b}C 6H(a,b){8(!1l(b.4f)){b.4f=I}8(!1l(b.5V)){b.5V=K}8(!1D(b.2I)){b.2I={}}8(!1l(b.2I.7A)){b.2I.7A=K}G b}C 6w(a,b){8(1o(b)){b=b.1g(a)}8(3p(b)){b={}}O 8(Z(b)){b={\'D\':b}}O 8(1G(b)){b=K}G b}C 6I(a,b){G b}C 3J(a,b,c,d,e){8(1p(a)){a=$(a,e)}8(1D(a)){a=$(a,e)}8(2u(a)){a=e.14().7b(a);8(!1l(c)){c=K}}O{8(!1l(c)){c=I}}8(!Z(a)){a=0}8(!Z(b)){b=0}8(c){a+=d.11}a+=b;8(d.P>0){2h(a>=d.P){a-=d.P}2h(a<0){a+=d.P}}G a}C 4B(i,o,s){E t=0,x=0;1j(E a=s;a>=0;a--){E j=i.1O(a);t+=(j.2f(\':L\'))?j[o.d[\'2v\']](I):0;8(t>o.4p){G x}8(a==0){a=i.S}x++}}C 7d(i,o,s){G 6e(i,o.D.1t,o.D.T.4s,s)}C 6V(i,o,s,m){G 6e(i,o.D.1t,m,s)}C 6e(i,f,m,s){E t=0,x=0;1j(E a=s,l=i.S;a>=0;a--){x++;8(x==l){G x}E j=i.1O(a);8(j.2f(f)){t++;8(t==m){G x}}8(a==0){a=l}}}C 5z(a,o){G o.D.T.4s||a.14().17(0,o.D.L).1t(o.D.1t).S}C 32(i,o,s){E t=0,x=0;1j(E a=s,l=i.S-1;a<=l;a++){E j=i.1O(a);t+=(j.2f(\':L\'))?j[o.d[\'2v\']](I):0;8(t>o.4p){G x}x++;8(x==l+1){G x}8(a==l){a=-1}}}C 5L(i,o,s,l){E v=32(i,o,s);8(!o.1T){8(s+v>l){v=l-s}}G v}C 3U(i,o,s){G 6f(i,o.D.1t,o.D.T.4s,s,o.1T)}C 71(i,o,s,m){G 6f(i,o.D.1t,m+1,s,o.1T)-1}C 6f(i,f,m,s,c){E t=0,x=0;1j(E a=s,l=i.S-1;a<=l;a++){x++;8(x>=l){G x}E j=i.1O(a);8(j.2f(f)){t++;8(t==m){G x}}8(a==l){a=-1}}}C 3I(i,o){G i.17(0,o.D.L)}C 6X(i,o,n){G i.17(n,o.D.T.1Z+n)}C 6Y(i,o){G i.17(0,o.D.L)}C 73(i,o){G i.17(0,o.D.T.1Z)}C 74(i,o,n){G i.17(n,o.D.L+n)}C 4w(i,o,d){8(o.1R){8(!1p(d)){d=\'29\'}i.1W(C(){E j=$(1k),m=4h(j.X(o.d[\'1S\']),10);8(!Z(m)){m=0}j.1m(d,m)})}}C 1U(i,o,m){8(o.1R){E x=(1l(m))?m:K;8(!Z(m)){m=0}4w(i,o,\'7B\');i.1W(C(){E j=$(1k);j.X(o.d[\'1S\'],((x)?j.1m(\'7B\'):m+j.1m(\'29\')))})}}C 5r(i,o){8(o.2m){i.1W(C(){E j=$(1k),s=5n(j,[\'N\',\'1d\']);j.1m(\'7e\',s)})}}C 5s(o,b){E c=o.D.L,7C=o.D[o.d[\'N\']],6g=o[o.d[\'1d\']],7D=3T(6g);b.1W(C(){E a=$(1k),6h=7C-7E(a,o,\'92\');a[o.d[\'N\']](6h);8(7D){a[o.d[\'1d\']](4r(6h,6g))}})}C 4P(a,o){E b=a.68(),$i=a.14(),$v=3I($i,o),52=4H(4I($v,o,I),o,K);b.X(52);8(o.1R){E p=o.1i,r=p[o.d[1]];8(o.1A&&r<0){r=0}E c=$v.3i();c.X(o.d[\'1S\'],c.1m(\'29\')+r);a.X(o.d[\'3q\'],p[o.d[0]]);a.X(o.d[\'1n\'],p[o.d[3]])}a.X(o.d[\'N\'],52[o.d[\'N\']]+(2R($i,o,\'N\')*2));a.X(o.d[\'1d\'],6i($i,o,\'1d\'));G 52}C 4I(i,o,a){G[2R(i,o,\'N\',a),6i(i,o,\'1d\',a)]}C 6i(i,o,a,b){8(!1l(b)){b=K}8(Z(o[o.d[a]])&&b){G o[o.d[a]]}8(Z(o.D[o.d[a]])){G o.D[o.d[a]]}a=(a.6j().3Q(\'N\')>-1)?\'2v\':\'3n\';G 4k(i,o,a)}C 4k(i,o,b){E s=0;1j(E a=0,l=i.S;a<l;a++){E j=i.1O(a);E m=(j.2f(\':L\'))?j[o.d[b]](I):0;8(s<m){s=m}}G s}C 2R(i,o,b,c){8(!1l(c)){c=K}8(Z(o[o.d[b]])&&c){G o[o.d[b]]}8(Z(o.D[o.d[b]])){G o.D[o.d[b]]*i.S}E d=(b.6j().3Q(\'N\')>-1)?\'2v\':\'3n\',s=0;1j(E a=0,l=i.S;a<l;a++){E j=i.1O(a);s+=(j.2f(\':L\'))?j[o.d[d]](I):0}G s}C 5b(a,o,d){E b=a.2f(\':L\');8(b){a.4g()}E s=a.68()[o.d[d]]();8(b){a.4j()}G s}C 5c(o,a){G(Z(o[o.d[\'N\']]))?o[o.d[\'N\']]:a}C 6k(i,o,b){E s=K,v=K;1j(E a=0,l=i.S;a<l;a++){E j=i.1O(a);E c=(j.2f(\':L\'))?j[o.d[b]](I):0;8(s===K){s=c}O 8(s!=c){v=I}8(s==0){v=I}}G v}C 7E(i,o,d){G i[o.d[\'93\'+d]](I)-i[o.d[d.6j()]]()}C 4r(s,o){8(3T(o)){o=4h(o.17(0,-1),10);8(!Z(o)){G s}s*=o/2J}G s}C H(n,c,a,b,d){8(!1l(a)){a=I}8(!1l(b)){b=I}8(!1l(d)){d=K}8(a){n=c.3x.42+n}8(b){n=n+\'.\'+c.3x.7u}8(b&&d){n+=c.3S}G n}C 2z(n,c){G(1p(c.6a[n]))?c.6a[n]:n}C 4H(a,o,p){8(!1l(p)){p=I}E b=(o.1R&&p)?o.1i:[0,0,0,0];E c={};c[o.d[\'N\']]=a[0]+b[1]+b[3];c[o.d[\'1d\']]=a[1]+b[0]+b[2];G c}C 3d(c,d){E e=[];1j(E a=0,7F=c.S;a<7F;a++){1j(E b=0,7G=d.S;b<7G;b++){8(d[b].3Q(2X c[a])>-1&&1G(e[b])){e[b]=c[a];16}}}G e}C 6D(p){8(1G(p)){G[0,0,0,0]}8(Z(p)){G[p,p,p,p]}8(1p(p)){p=p.3P(\'94\').7H(\'\').3P(\'95\').7H(\'\').3P(\' \')}8(!2V(p)){G[0,0,0,0]}1j(E i=0;i<4;i++){p[i]=4h(p[i],10)}1B(p.S){Q 0:G[0,0,0,0];Q 1:G[p[0],p[0],p[0],p[0]];Q 2:G[p[0],p[1],p[0],p[1]];Q 3:G[p[0],p[1],p[2],p[1]];2y:G[p[0],p[1],p[2],p[3]]}}C 4G(a,o){E x=(Z(o[o.d[\'N\']]))?1I.2A(o[o.d[\'N\']]-2R(a,o,\'N\')):0;1B(o.1A){Q\'1n\':G[0,x];Q\'35\':G[x,0];Q\'5d\':2y:G[1I.2A(x/2),1I.4i(x/2)]}}C 6x(o){E a=[[\'N\',\'7I\',\'2v\',\'1d\',\'7J\',\'3n\',\'1n\',\'3q\',\'1S\',0,1,2,3],[\'1d\',\'7J\',\'3n\',\'N\',\'7I\',\'2v\',\'3q\',\'1n\',\'5o\',3,2,1,0]];E b=a[0].S,7K=(o.2b==\'35\'||o.2b==\'1n\')?0:1;E c={};1j(E d=0;d<b;d++){c[a[0][d]]=a[7K][d]}G c}C 4C(x,o,a,b){E v=x;8(1o(a)){v=a.1g(b,v)}O 8(1p(a)){E p=a.3P(\'+\'),m=a.3P(\'-\');8(m.S>p.S){E c=I,6l=m[0],2Z=m[1]}O{E c=K,6l=p[0],2Z=p[1]}1B(6l){Q\'96\':v=(x%2==1)?x-1:x;16;Q\'97\':v=(x%2==0)?x-1:x;16;2y:v=x;16}2Z=4h(2Z,10);8(Z(2Z)){8(c){2Z=-2Z}v+=2Z}}8(!Z(v)||v<1){v=1}G v}C 2x(x,o,a,b){G 6m(4C(x,o,a,b),o.D.T)}C 6m(v,i){8(Z(i.34)&&v<i.34){v=i.34}8(Z(i.1X)&&v>i.1X){v=i.1X}8(v<1){v=1}G v}C 5i(s){8(!2V(s)){s=[[s]]}8(!2V(s[0])){s=[s]}1j(E j=0,l=s.S;j<l;j++){8(1p(s[j][0])){s[j][0]=$(s[j][0])}8(!1l(s[j][1])){s[j][1]=I}8(!1l(s[j][2])){s[j][2]=I}8(!Z(s[j][3])){s[j][3]=0}}G s}C 6d(k){8(k==\'35\'){G 39}8(k==\'1n\'){G 37}8(k==\'4o\'){G 38}8(k==\'5U\'){G 40}G-1}C 5K(n,a,c){8(n){E v=a.1Q(H(\'4m\',c));$.1r.1v.25.6b(n,v)}}C 7q(n){E c=$.1r.1v.25.3F(n);G(c==\'\')?0:c}C 5n(a,b){E c={},53;1j(E p=0,l=b.S;p<l;p++){53=b[p];c[53]=a.X(53)}G c}C 6y(a,b,c,d){8(!1D(a.T)){a.T={}}8(!1D(a.3M)){a.3M={}}8(a.3m==0&&Z(d)){a.3m=d}8(1D(a.L)){a.T.34=a.L.34;a.T.1X=a.L.1X;a.L=K}O 8(1p(a.L)){8(a.L==\'1c\'){a.T.1c=I}O{a.T.2c=a.L}a.L=K}O 8(1o(a.L)){a.T.2c=a.L;a.L=K}8(!1p(a.1t)){a.1t=(c.1t(\':3r\').S>0)?\':L\':\'*\'}8(!a[b.d[\'N\']]){8(b.2m){18(I,\'7L a \'+b.d[\'N\']+\' 1j 4c D!\');a[b.d[\'N\']]=4k(c,b,\'2v\')}O{a[b.d[\'N\']]=(6k(c,b,\'2v\'))?\'1c\':c[b.d[\'2v\']](I)}}8(!a[b.d[\'1d\']]){a[b.d[\'1d\']]=(6k(c,b,\'3n\'))?\'1c\':c[b.d[\'3n\']](I)}a.3M.N=a.N;a.3M.1d=a.1d;G a}C 6C(a,b){8(a.D[a.d[\'N\']]==\'1c\'){a.D.T.1c=I}8(!a.D.T.1c){8(Z(a[a.d[\'N\']])){a.D.L=1I.4i(a[a.d[\'N\']]/a.D[a.d[\'N\']])}O{a.D.L=1I.4i(b/a.D[a.d[\'N\']]);a[a.d[\'N\']]=a.D.L*a.D[a.d[\'N\']];8(!a.D.T.2c){a.1A=K}}8(a.D.L==\'98\'||a.D.L<1){18(I,\'2p a 5N 27 4a L D: 7L 4D "1c".\');a.D.T.1c=I}}G a}C 6z(a,b,c){8(a==\'M\'){a=4k(c,b,\'2v\')}G a}C 6A(a,b,c){8(a==\'M\'){a=4k(c,b,\'3n\')}8(!a){a=b.D[b.d[\'1d\']]}G a}C 5g(o,a){E p=4G(3I(a,o),o);o.1i[o.d[1]]=p[1];o.1i[o.d[3]]=p[0];G o}C 5e(o,a,b){E c=6m(1I.2A(o[o.d[\'N\']]/o.D[o.d[\'N\']]),o.D.T);8(c>a.S){c=a.S}E d=1I.4i(o[o.d[\'N\']]/c);o.D.L=c;o.D[o.d[\'N\']]=d;o[o.d[\'N\']]=c*d;G o}C 3N(p){8(1p(p)){E i=(p.3Q(\'99\')>-1)?I:K,r=(p.3Q(\'3f\')>-1)?I:K}O{E i=r=K}G[i,r]}C 5Y(a){G(Z(a))?a:2H}C 6n(a){G(a===2H)}C 1G(a){G(6n(a)||2X a==\'7M\'||a===\'\'||a===\'7M\')}C 2V(a){G(a 2W 9a)}C 2u(a){G(a 2W 7N)}C 1D(a){G((a 2W 9b||2X a==\'2g\')&&!6n(a)&&!2u(a)&&!2V(a))}C Z(a){G((a 2W 48||2X a==\'27\')&&!9c(a))}C 1p(a){G((a 2W 9d||2X a==\'2N\')&&!1G(a)&&!3p(a)&&!51(a))}C 1o(a){G(a 2W 9e||2X a==\'C\')}C 1l(a){G(a 2W 9f||2X a==\'3c\'||3p(a)||51(a))}C 3p(a){G(a===I||a===\'I\')}C 51(a){G(a===K||a===\'K\')}C 3T(x){G(1p(x)&&x.17(-1)==\'%\')}C 2o(){G 6c 7y().2o()}C 2K(o,n){18(I,o+\' 2f 9g, 9h 1j 9i 9j 9k 9l. 9m \'+n+\' 9n.\')}C 18(d,m){8(1D(d)){E s=\' (\'+d.4l+\')\';d=d.18}O{E s=\'\'}8(!d){G K}8(1p(m)){m=\'1v\'+s+\': \'+m}O{m=[\'1v\'+s+\':\',m]}8(3l.6o&&3l.6o.7O){3l.6o.7O(m)}G K}$.1N($.2k,{\'9o\':C(t){E a=t*t;G t*(-a*t+4*a-6*t+4)},\'9p\':C(t){G t*(4*t*t-9*t+6)},\'9q\':C(t){E a=t*t;G t*(33*a*a-9r*a*t+9s*a-67*t+15)}})})(7N);', 62, 587, '|||||||opts|if||||||||||||||||||||||||||||||function|items|var|conf|return|cf_e|true|itms|false|visible|auto|width|else|total|case|trigger|length|visibleConf|scrl|prev|button|css|next|is_number||first|bind|tt0|children||break|slice|debug|anims|pagination|push|variable|height|progress|stopPropagation|call|mousewheel|padding|for|this|is_boolean|data|left|is_function|is_string|swipe|fn|wrp|filter|tmrs|carouFredSel|fade|_onafter|_moveitems|container|align|switch|duration|is_object|_s_paddingold|_s_paddingcur|is_undefined|play|Math|cover|_position|opacity|scroll|extend|eq|_a_wrapper|triggerHandler|usePadding|marginRight|circular|sz_resetMargin|fx|each|max|i_cur_l|old|isScrolling|i_old_l|uncover|unbind||cookie|isPaused|number|a_cfs|_cfs_origCssMargin|clbk|direction|adjust|isStopped|stopImmediatePropagation|is|object|while|i_new|w_siz|easing|nr|responsive|synchronise|getTime|Not|bar|i_new_l|a_cur|remove|is_jquery|outerWidth|avail_primary|cf_getItemsAdjust|default|cf_c|ceil|pR|_s_paddingnew|queu|preventDefault|a_itm|pauseOnHover|null|options|100|deprecated|timeoutDuration|startTime|string|removeClass|sc_startScroll|i_skp|ms_getTotalSize|a_old|a_lef|a_dur|is_array|instanceof|typeof|key|adj||opts_orig|gn_getVisibleItemsNext||min|right|addClass||||pause|perc|boolean|cf_sortParams|scrolling|resume|onAfter|i_old|last|crossfade|slideTo|window|start|outerHeight|_cfs_triggerEvent|is_true|top|hidden|sc_clearTimers|pre|post|timePassed|Carousel|events|queue|infinite|nv_enableNavi|i_siz|i_siz_vis|_a_paddingold|_a_paddingcur|get|onBefore|updatePageStatus|gi_getCurrentItems|gn_getItemIndex|anchorBuilder|event|sizesConf|bt_pauseOnHoverConfig|ns2|split|indexOf|go_getObject|serialNumber|is_percentage|gn_getVisibleItemsNextFilter|orgCSS|position|zIndex|none|sc_stopScroll||dur2|prefix|appendTo|sc_setScroll|sc_fireCallbacks|currentPage|before|Number||of|document|the|touchwipe|wN|onTouch|hide|parseInt|floor|show|ms_getTrueLargestSize|selector|currentPosition|destroy|up|maxDimension|primarySizePercentage|ms_getPercentage|org|onTimeoutStart|onTimeoutPause|onTimeoutEnd|sz_storeMargin|stopped|updater|minimum|configuration|gn_getVisibleItemsPrev|cf_getAdjust|to|onEnd|clone|cf_getAlignPadding|cf_mapWrapperSizes|ms_getSizes|a_wsz|a_new|a_cfs_vis|end|updateSizes|eval|sz_setSizes|pgs|deviation|nv_showNavi|mouseenter|mouseleave|pauseOnEvent|keys|wipe|di|go_getNaviObject||is_false|sz|prop|element|starting_position|_cfs_isCarousel|_cfs_init||go_getPrevNextObject|defaults|ms_getParentSize|ms_getMaxDimension|center|in_getResponsiveValues|bottom|in_getAlignPadding|go_complementPrevNextObject|cf_getSynchArr|onPauseStart|onPausePause|onPauseEnd|pauseDuration|in_mapCss|marginBottom|newPosition|_cfs_origCss|sz_storeSizes|sz_setResponsiveSizes|_cfs_unbind_events|stop|finish|interval|type|conditions|gn_getVisibleOrg|backward|sc_hideHiddenItems|a_lef_vis|sc_getDuration|_a_paddingnew|not|sc_showHiddenItems|sc_mapCallbackArguments|sc_afterScroll|sc_fireQueue|cf_setCookie|gn_getVisibleItemsNextTestCircular|slideToPage|valid|linkAnchors|value|_cfs_bind_buttons|click|_cfs_unbind_buttons|scrolled|down|onMouse|swP|swN|bt_mousesheelNumber|delay||_windowWidth|_windowHeight|nh|pauseOnResize|ns3|wrapper||parent|continue|classnames|set|new|cf_getKeyCode|gn_getItemsPrevFilter|gn_getItemsNextFilter|seco|nw|ms_getLargestSize|toLowerCase|ms_hasVariableSizes|sta|cf_getItemAdjustMinMax|is_null|console|caroufredsel|No|go_getItemsObject|go_getScrollObject|go_getAutoObject|go_getPaginationObject|go_getSwipeObject|go_getMousewheelObject|cf_getDimensions|in_complementItems|in_complementPrimarySize|in_complementSecondarySize|upDateOnWindowResize|in_complementVisibleItems|cf_getPadding|500|go_complementAutoObject|go_complementPaginationObject|go_complementSwipeObject|go_complementMousewheelObject|_cfs_build|textAlign|float|marginTop|marginLeft|absolute|_cfs_bind_events|paused|enough|needed|page|slide_|gn_getScrollItemsPrevFilter|Scrolling|gi_getOldItemsPrev|gi_getNewItemsPrev|directscroll|concat|gn_getScrollItemsNextFilter|forward|gi_getOldItemsNext|gi_getNewItemsNext|jumpToStart|after|append|removeItem|round|hash|index|selected|gn_getVisibleItemsPrevFilter|_cfs_origCssSizes|Item|keyup|keyCode|plugin|scN|cursor|The|option|mcN|configs|classname|cf_getCookie|random|itm|onCreate|namespace|pageAnchorBuilder|span|progressbarUpdater|Date|_cfs_isHidden|triggerOnTouchEnd|_cfs_tempCssMargin|newS|secp|ms_getPaddingBorderMargin|l1|l2|join|innerWidth|innerHeight|dx|Set|undefined|jQuery|log|found|caroufredsel_cookie_|relative|fixed|overflow|setInterval|setTimeout|or|Callback|returned|Page|resumed|currently|slide_prev|prependTo|slide_next|prevPage|nextPage|prepend|carousel|insertItem|add|detach|currentVisible|body|find|Preventing|non|sliding|replaceWith|widths|heights|automatically|touchSwipe|min_move_x|min_move_y|preventDefaultEvents|wipeUp|wipeDown|wipeLeft|wipeRight|ontouchstart|in|swipeUp|swipeDown|swipeLeft|swipeRight|move|resize|wrap|class|unshift|location|swing|cfs|div|caroufredsel_wrapper|href|charAt|setTime|1000|expires|toGMTString|path|orgDuration|animate|complete|shift|clearTimeout|clearInterval|skipped|Hiding|navigation|disabled|2500|Width|outer|px|em|even|odd|Infinity|immediate|Array|Object|isNaN|String|Function|Boolean|DEPRECATED|support|it|will|be|removed|Use|instead|quadratic|cubic|elastic|106|126'.split('|'), 0, {}));
    </script>
</body>
</html>
 

12. Flickity Modern Carousel

Made by Radu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #4a5899;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
}
.carousel.animation-reveal {
  -webkit-animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1);
          animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1);
}
@-webkit-keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.card {
  margin: 0 1rem;
  overflow: hidden;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);
  border-radius: 8px;
  height: 200px;
  width: 200px;
  display: block;
  position: relative;
  background-position: 50%;
  background-size: cover;
  cursor: pointer;
  transition: width 0.16s ease-in-out, height 0.16s ease-in-out;
}

.card.is-custom-selected {
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-bg {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  position: relative;
  height: 100%;
}

.flickity-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
  <div class="carousel">
  <div class="slider">

    <div class="card">
      <!--
      <div class="card-bg" style="background-image: url(https://coverfiles.alphacoders.com/737/73733.jpg);">
      </div>
      -->
      <div class="card-bg" style="background-image: url(https://www.mobygames.com/images/covers/l/490197-star-wars-battlefront-ultimate-edition-playstation-4-front-cover.png);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://i.imgur.com/wKtxAnN.png);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://media.playstation.com/is/image/SCEA/star-wars-jedi-fallen-order-square-art-01-ps4-us-29may19?$native_nt$);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://dynaimage.cdn.cnn.com/cnn/c_fill,g_auto,w_1200,h_675,ar_16:9/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F200612170630-underscored-star-wars-squadrons-lead-1.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://lumiere-a.akamaihd.net/v1/images/lego-star-wars-skywalker-saga-main_c0051eca.jpeg?region=0%2C0%2C1000%2C999&width=960);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://droidjournal.com/wp-content/uploads/2020/04/ghost-of-tsushima.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://i.pinimg.com/originals/cd/51/83/cd51838b54314c40e11fb351b5b5eb74.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://www.mobygames.com/images/covers/l/330413-uncharted-4-a-thief-s-end-playstation-4-front-cover.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://www.rockstargames.com/V/img/global/order/mobile-cover.jpg);">
      </div>
    </div>

    <div class="card">
      <div class="card-bg" style="background-image: url(https://i.pinimg.com/originals/14/21/72/14217228af3726b095b9805b991e1c16.jpg);">
      </div>
    </div>

  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/flickity.pkgd.js'></script>
      <script>
(function ($) {
  $(function () {
    var slider = $(".slider").flickity({
      imagesLoaded: true,
      percentPosition: false,
      prevNextButtons: false, //true = enable buttons
      initialIndex: 3,
      pageDots: false, //true = enable dots
      groupCells: 1,
      selectedAttraction: 0.2,
      friction: 0.8,
      draggable: true });


    //this enables clicking on cards
    slider.on(
    "staticClick.flickity",
    function (event, pointer, cellElement, cellIndex) {
      if (typeof cellIndex == "number") {
        slider.flickity("selectCell", cellIndex);
      }
    });


    //this resizes the cards and centers the carousel because it tends to move a few pixels to the right if .resize() and .reposition() aren't used
    var flkty = slider.data("flickity");
    flkty.selectedElement.classList.add("is-custom-selected");
    flkty.resize();
    flkty.reposition();
    let time = 0;
    function reposition() {
      flkty.reposition();
      if (time++ < 10) {
        requestAnimationFrame(reposition);
      } else {
        $(".flickity-prev-next-button").css("pointer-events", "auto");
      }
    }
    requestAnimationFrame(reposition);

    //this expands the cards when in focus
    flkty.on("settle", () => {
      $(".card").removeClass("is-custom-selected");
      $(".flickity-prev-next-button").css("pointer-events", "none");
      flkty.selectedElement.classList.add("is-custom-selected");

      let time = 0;
      function reposition() {
        flkty.reposition();
        if (time++ < 10) {
          requestAnimationFrame(reposition);
        } else {
          $(".flickity-prev-next-button").css("pointer-events", "auto");
        }
      }
      requestAnimationFrame(reposition);
    });

    //this reveals the carousel
    $(".carousel").addClass("animation-reveal");
    $(".carousel").css("opacity", "0");
    flkty.resize();
    flkty.reposition();
    setTimeout(() => {
      $(".carousel").removeClass("animation-reveal");
      $(".carousel").css("opacity", "1");
      flkty.resize();
      flkty.reposition();
      let time = 0;
      function reposition() {
        flkty.reposition();
        if (time++ < 10) {
          requestAnimationFrame(reposition);
        }
      }
      requestAnimationFrame(reposition);
    }, 1000);
  });
})(jQuery);
    </script>
</body>
</html>

13. Basic Jquery carousel

Made by Ofthedead. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  background: DeepPink;
  height: 100vh;
  padding-top: 10px;
  font-family: Arial;
}

section {
  width: 380px;
  height: 550px;
  margin: 0 auto;
  text-align: center;
}
section h1 {
  color: #ffffff;
  font-size: 32px;
}
section span {
  display: block;
  position: relative;
  top: 210px;
}
section span input {
  border: 2px solid #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  background: Indigo;
  color: White;
  font-weight: bold;
  padding-top: 3px;
}
section span #prev {
  left: -140px;
}
section span #next {
  right: -140px;
}

.carousel {
  margin-top: -10px;
}
.carousel li {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  list-style-type: none;
  position: absolute;
}
.carousel li:before {
  content: url("../img/icone.png");
  display: block;
  position: relative;
  top: 30px;
}
.carousel li article {
  background: #ffffff;
  text-align: center;
  width: 300px;
  height: 400px;
  background: #ffffff;
  display: inline-block;
  border: 2px solid #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 2px 3px #000000;
}
.carousel li article h1 {
  color: #000000;
  font-size: 20px;
  margin-top: 30px;
}
.carousel li article p {
  color: #000000;
  font-size: 15px;
  width: 230px;
  margin: 15px auto 20px;
}
.carousel li article a {
  text-decoration: none;
  font-weight: bold;
  color: #000000;
}
.carousel li article img {
  margin-top: 20px;
}

.main-pos {
  z-index: 3000;
}

.left-pos {
  margin-left: -8em !important;
  z-index: 1000;
  -webkit-transform: scale(0.75) perspective(1000px) rotateY(35deg);
  -moz-transform: scale(0.75) perspective(1000px) rotateY(35deg);
  transform: scale(0.75) perspective(1000px) rotateY(35deg);
}

.left-pos-2 {
  margin-left: -13em !important;
  z-index: 500;
  -webkit-transform: scale(0.5) perspective(1000px) rotateY(35deg);
  -moz-transform: scale(0.5) perspective(1000px) rotateY(35deg);
  transform: scale(0.5) perspective(1000px) rotateY(35deg);
}

.back-pos {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.right-pos {
  margin-left: 8em !important;
  z-index: 1000;
  -webkit-transform: scale(0.75) perspective(1000px) rotateY(-35deg);
  -moz-transform: scale(0.75) perspective(1000px) rotateY(-35deg);
  transform: scale(0.75) perspective(1000px) rotateY(-35deg);
}

.right-pos-2 {
  margin-left: 13em !important;
  z-index: 500;
  -webkit-transform: scale(0.5) perspective(1000px) rotateY(-35deg);
  -moz-transform: scale(0.5) perspective(1000px) rotateY(-35deg);
  transform: scale(0.5) perspective(1000px) rotateY(-35deg);
}
</style>
</head>
<body>
  <section>
  <h1>MediQuality c'est quoi ?</h1>
  <ul class="carousel">
    <li class="items left-pos-2" id="1">
      <article>
        <h1>6 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
    <li class="items left-pos" id="2">
      <article>
        <h1>7 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
    <li class="items main-pos" id="3">
      <article>
        <h1>1 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
    <li class="items right-pos" id="4">
      <article>
        <h1>2 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
    <li class="items right-pos-2" id="5">
      <article>
        <h1>3 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
    <li class="items back-pos" id="6">
      <article>
        <h1>4 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
    <li class="items back-pos" id="7">
      <article>
        <h1>5 Une communauté</h1>
        <p>Dialoguez avec la communauté digitale des professionnels de la santé la plus active et la plus large en Belgique, au Luxembourg et aux Pays-Bas.</p>
        <a href="#">En savoir plus</a>
        <img src="http://images4.fanpop.com/image/photos/20400000/Pinkie-Pie-my-little-pony-friendship-is-magic-20424750-570-402.jpg" height="205" width="299" alt="">
      </article>
    </li>
  </ul>
  <span>
    <input type="button" value="<" id="prev">
    <input type="button" value=">" id="next">
  </span>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function ($) {

  //slideshow interval
  var autoSwap = setInterval(swap, 10000);

  //pause/unpause slideshow on mouse hover
  $('ul, span').hover(
  function () {
    clearInterval(autoSwap);
  },

  function () {
    autoSwap = setInterval(swap, 10000);
  });

  //variables
  var items = [];
  var startItem = 1;
  var position = 0;
  var itemCount = $('.carousel li.items').length;
  var leftpos = itemCount;
  var resetCount = itemCount;

  //swap images function
  function swap(action) {
    var direction = action;

    //previous button
    if (direction == 'counter-clockwise') {
      var leftitem = $('.left-pos-2').attr('id') - 1;
      console.log(leftitem);
      if (leftitem <= 0) {
        leftitem = itemCount;
        console.log(leftitem);
      }
      console.log('prev');
      $('.right-pos-2').removeClass('right-pos-2').addClass('back-pos');
      $('.right-pos').removeClass('right-pos').addClass('right-pos-2');
      $('.main-pos').removeClass('main-pos').addClass('right-pos');
      $('.left-pos').removeClass('left-pos').addClass('main-pos');
      $('.left-pos-2').removeClass('left-pos-2').addClass('left-pos');
      $('#' + leftitem).removeClass('back-pos').addClass('left-pos-2');
    }

    //next button
    if (direction == 'clockwise' || direction == '' || direction == null) {
      var rightitem = $('.right-pos-2').attr('id');
      rightitem++;
      console.log(rightitem);
      if (rightitem > itemCount) {
        rightitem = 1;
        console.log(rightitem);
      }
      console.log('next');

      $('.left-pos-2').removeClass('left-pos-2').addClass('back-pos');
      $('.left-pos').removeClass('left-pos').addClass('left-pos-2');
      $('.main-pos').removeClass('main-pos').addClass('left-pos');
      $('.right-pos').removeClass('right-pos').addClass('main-pos');
      $('.right-pos-2').removeClass('right-pos-2').addClass('right-pos');
      $('#' + rightitem).removeClass('back-pos').addClass('right-pos-2');
    }
  }

  //next button click
  $('#next').click(function () {
    swap('clockwise');
  });

  //prev button click
  $('#prev').click(function () {
    swap('counter-clockwise');
  });

  $('.left-pos-2').click(function () {
    swap('counter-clockwise');
  });

})(jQuery);
    </script>
</body>
</html>