A Pen by Kailin Huang

Thumbnail
This awesome code was written by _jajaja-kelly, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright _jajaja-kelly ©
  • HTML
  • CSS
  • JavaScript
    <h1>Image Slider with Neat Designs</h1>

  <div class="container">

    <div class="slider-wrapper">
      <div class="inner-wrapper">
        <div class="slide" style="background: #E54B4B;">1</div>
        <div class="slide" style="background: #61BFAD;">2</div>
        <div class="slide" style="background: #F0CF61;">3</div>
        <div class="slide" style="background: #0E38B1;">4</div>
        <div class="slide" style="background: #C6D7C7;">5</div>
      </div>
    </div>

    <div class="button prev"></div>
    <div class="button next"></div>


  </div>


/*Downloaded from https://www.codeseek.co/_jajaja-kelly/a-pen-by-kailin-huang-MOzvPW */
    
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #333;
  height: 120vh;
  position: relative;
}

h1 {
  text-align: center;
  font-size: 1.5em;
  margin: 30px 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}

.slider-wrapper {
  width: 600px;
  height: 300px;
  overflow: hidden;
}

.inner-wrapper {
  width: 500%;
  height: 100%;
  position: relative;
  left: -100%;

}

.slide {
  width: calc(100% / 5);
  height: 100%;
  float: left;
  font-size: 100px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  width: 30px;
  height: 30px;
  border-top: 2px solid black;
  position: absolute;
  cursor: pointer;
}

.prev {
  border-left: 2px solid black;
  left: 10%;
  transform: rotate(-45deg);
}

.next {
  border-right: 2px solid black;
  right: 10%;
  transform: rotate(45deg);
}



/*Downloaded from https://www.codeseek.co/_jajaja-kelly/a-pen-by-kailin-huang-MOzvPW */
    $(function() {

  var inWrap = $('.inner-wrapper');

  $('.prev').on('click', function() {

    inWrap.animate({left: '0%'}, 300, function(){

      inWrap.css('left', '-100%');

      $('.slide').first().before($('.slide').last());

    });


  });



  $('.next').on('click', function() {

    inWrap.animate({left: '-200%'}, 300, function(){

      inWrap.css('left', '-100%');

      $('.slide').last().after($('.slide').first());

    });


  });


})
;

Comments