<h2>Simple responsive slider</h2>
<section id="container">
  <div id="slider-container">
    <ul class="images-container">
      <li>
       <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2017-10/screen01-Lewitt-DTP340REX-gradient-hirez-01-2912-02.jpg">
      </li>
      <li>
        <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2017-01/LCT-240-PRO.jpg">
      </li>
            <li>
        <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2016-06/screen01_Lewitt-LCT140-gradient-small-02.jpg">
      </li>
      <li>
        <img src="http://cdn1.lewitt-audio.com/sites/default/files/styles/wide_cover_medium/public/2017-10/LCT-540-SUBZERO-113-website-04.jpg">
      </li>
    </ul>
    <span class="arrow a-left"></span>
    <span class="arrow a-right"></span>
    <div class='bullets-container'></div>
  </div>
</section>
*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

h2{
  text-align:center;
  padding:50px 0;
  font-family: 'Abel', sans-serif;
  font-size:45px;
  @media(max-width:680px){
    font-size:30px;
  }
}
ul{
  padding:0;
  list-style: none;
  &:after{
    content:"";
    display:block;
    clear:both;
  }
}
#container{
  width: 100%;
}
#slider-container{
  width:100%;
  position:relative;
  overflow:hidden;
  ul{
    li{
      float:left;
      img{
        width:100%;
        float:left;
      }
    }
  }
  .arrow{
    display:block;
    position:absolute;
    top:50%;
    width:50px;
    height:50px;
    transform:translateY(-50%) scale(1); 
    cursor:pointer;
    &:before,
    &:after{
      content:"";
      display:block;
      width:34px;
      height:1px;
      position:absolute;
      background:white;
      border-top:1px solid grey;
    }
    @media(max-width:680px){
      transform:translateY(-50%) scale(0.5); 
    }
  }
  .arrow.a-left{
    left:15px;
    &:before{
      top:0;
      left:0;
      margin-top:0;
      transform:rotate(-45deg);
      transform-origin: 100% 0;
    }
    &:after{
      bottom:0;
      left:0;
      margin-bottom:0;
      transform:rotate(45deg);
      transform-origin: 100% 0;
    }
  }
  .arrow.a-right{
    right:15px;
     &:before{
      top:0;
      right:0;
      margin-top:0;
      transform:rotate(45deg);
      transform-origin: 0 0;
    }
    &:after{
      bottom:0;
      right:0;
      margin-bottom:0;
      transform:rotate(-45deg);
      transform-origin: 0 0;
    }
  }
  .bullets-container{
    position:absolute;
    bottom:5%;
    left:50%;
    transform: translateX(-50%);
    .bullet{
      width:15px;
      height:15px;
      display:inline-block;
      border-radius:50%;
      border:1px solid grey;
      cursor:pointer;
      margin:0 8px;
      &.active{
        background:grey;
      }
    }
  }
}
View Compiled
$(document).ready(mySlider);

function mySlider() {
    var imgNumber, 
        sliderContainerWidth, 
        imgContainer,
        index,
        flag = true,
        speed = 600,
        bullets = true,
        auto = true ,
        time = 5000 ;
        
    construction();
    $(window).resize(construction);
    if(auto){
     var handle = setInterval(slideRight, time) ; 
    }

    function construction() {
        index = 1;
        imgNumber = $('.images-container li').length;
        sliderContainerWidth = Math.round($('#slider-container').width());
        imgContainer = sliderContainerWidth * imgNumber;
        $('.images-container').css("width", imgContainer);
        $('.images-container li').css("width", sliderContainerWidth);
        $('.images-container').css("margin-left", 0);
        if (bullets == true) {
            $('.bullets-container').html("");
            for (i = 1; i <= imgNumber; i++) {
                $('.bullets-container').append("<span class='bullet'></span>");
            }
            $('.bullet').eq(0).addClass('active');
        }
        $(".bullet").click(pagers);
        $('.a-right').click(slideRight);
        $('.a-left').click(slideLeft);
    }

    function pagers() {
        if (!$(this).hasClass('active')) {
            var bulletIndex = $(".bullets-container span").index(this) + 1;
            index = bulletIndex;
            $(".bullets-container").find(".bullet").removeClass("active").eq(bulletIndex - 1).addClass("active");
            $('.images-container').animate({
                marginLeft: -sliderContainerWidth * (bulletIndex - 1)
            }, speed);
        }
    }

    function slideRight() {
        var imgContainerLeft = parseInt($('.images-container').css('margin-left'));
        if (flag) {
            if (imgContainerLeft == -sliderContainerWidth * (imgNumber - 1)) {
                index = 1;
                $('.images-container').animate({
                    marginLeft: 0
                }, speed, function() {
                    flag = true;
                })
            } else {
                index++;
                $('.images-container').animate({
                    marginLeft: '-=' + sliderContainerWidth
                }, speed, function() {
                    flag = true;
                })
            }
            flag = false;
            $(".bullets-container").find(".bullet").removeClass("active").eq(index - 1).addClass("active");
        }
    }

    function slideLeft() {
        var imgContainerLeft = parseInt($('.images-container').css('margin-left'));
        clearInterval(slideRight, 3000);
        if (flag) {
            if (imgContainerLeft == 0 ) {
                index = index + (imgNumber - 1);
                $('.images-container').animate({
                    marginLeft: -sliderContainerWidth * (imgNumber - 1) + 'px'
                }, speed, function() {
                    flag = true;
                })
            } else {
                index--;
                $('.images-container').animate({
                    marginLeft: '+=' + sliderContainerWidth
                }, speed, function() {
                    flag = true;
                })
            }
            flag = false;
            $(".bullets-container").find(".bullet").removeClass("active").eq(index - 1).addClass("active");
        }

    }
    $("#slider-container .arrow , .bullets-container").hover(function(){
      clearInterval(handle);
    },function(){
      handle = setInterval(slideRight, time) ;
    })
  
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js