Simple Horizontal Slider

index.html

<h1>Horizontal Slider</h1>
<h4>En desarollo</h4>
<hr />
<div class="horizontal-slider">
  <ul class="h-items">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <div class="h-controlls">
    <span class="prev">
    <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </span>
    <span class="next">
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </span>
  </div>
</div>

script.js

var hsuma = 0;
$(document).ready(function(){
  $(".next").click(function(){
    hsuma += -100;
    if(hsuma>=-200)
    $(".h-items").animate({marginLeft:hsuma+"%"},"fast");
    else{
      hsuma = 0;
      $(".h-items").animate({marginLeft:hsuma+"%"},"fast");
    }
  });
  
  
  $(".prev").click(function(){
    if(hsuma==0){
      hsuma = -200;
      $(".h-items").animate({marginLeft:hsuma+"%"},"fast");
    }
    else{
      hsuma += 100;
      $(".h-items").animate({marginLeft:hsuma+"%"},"fast");
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://use.fontawesome.com/42649e5898.js"></script>

simple-horizontal-slider.markdown

Simple Horizontal Slider

A Pen by Elias Reyes on CodePen.

License.

style.css

body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 20px;
  font-family: arial;
  box-sizing:border-box;
}

.horizontal-slider {
  width: 500px;
  height: 150px;
  background: #e6e6e6;
  overflow: hidden;
  position: relative;
}

.h-items {
  width: 300%;
  font-size: 0;
  list-style-none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.h-items>li {
  display: inline-block;
  font-size: 12pt;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  cursor: pointer;
}

.next {
  right: 0px;
}