<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) ;
})
};
This Pen doesn't use any external CSS resources.