Carousel horizontal

by Haelle

HTML

<div class="slider">
  <div class="slider-container">
    <div class="a item">
      <h1>
        This is a huge title
      </h1>
    </div>
    <div class="b item">
      <h5>
        This is a small title
      </h5>
      <img src="https://wallpaper-gallery.net/images/random-picture/random-picture-21.jpg">
      <p>
        This is a paragraph
      </p>
    </div>
    <div class="c item">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis, magna quis consectetur consectetur, nunc sapien efficitur dui, ac lacinia erat lectus quis erat. Vestibulum ut odio nunc. Donec luctus, urna vel pretium venenatis, ex tellus sollicitudin
        ex, vitae ullamcorper lacus libero in ante. In a luctus sem. Vestibulum justo ipsum, ultrices pretium nisi nec, pretium rhoncus ipsum. Vestibulum accumsan libero et sem venenatis, eu volutpat lectus pellentesque
      </p>
    </div>
    <div class="d item">

    </div>
    <div class="e item">
      <h3>
        42
      </h3>
    </div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

SCSS

body {
  background: grey;
  padding: 20px;
  font-family: Helvetica;
}

.slider { 
  overflow: hidden; 
  
  .slider-container { 
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    transition: all 2s ease 0s;
    
    .item { 
      width: 20%; 
      height: 300px;
      text-align: center;
      float: left; 
      overflow: hidden;
      
      &.a {
        background: blue;
      }
      
      &.b {
        background: red;
        img {
          height: 50px;
        }
      }

      &.c {
        background-image: url("https://wallpaper-gallery.net/images/random-picture/random-picture-21.jpg");
        background-size: cover;
      }

      &.d {
        background: purple;
      }

      &.e {
        background: yellow;
      }
    }
  }
}

.next,
.prev {
  position: absolute;
  top: 350px;
  padding: 1em 2em;
  background: #CCC;
  border-radius: 5px;
}

.next {
  right: 5em;
}

.prev {
  left: 5em;
}

JavaScript

class Carousel {
  constructor() {
    this.carousel = $('.slider-container')
    this.currentPosition = 0
    
    this.initEvents()
  }
  
  initEvents() {
  	$(".next").on("click", () => this.rotate("n"))
    $(".prev").on("click", () => this.rotate("p"))
  }

  rotate(direction) {
		this.updateCurrentPosition(direction)
    this.carousel.css({
    	"left": this.currentPosition + "%"
    })
  }
  
  updateCurrentPosition(direction) {
  	if (direction == 'n') {
    	this.currentPosition = (this.currentPosition - 100) % 500
    }
    if (direction == 'p') {
    	this.currentPosition = (this.currentPosition + 100) % 500
    }
    if (this.currentPosition > 0) {
    	this.currentPosition = -400
    }
  }
}

var carousel = new Carousel()