<div id="slider">
<ul id="slideWrap">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a id="prev" href="#">≪</a>
<a id="next" href="#">≫</a>
</div>
// Colors
$color1: #00A6ED;
$color2: #FFD966;
$color3: #F71735;
$color4: #89da59;
$color5: #9881F5;
$color6: #19191a;
body {
margin: 10%;
}
#slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0,0,0,0.3);
ul {
position: relative;
list-style: none;
height: 100%;
width: 9999%;
padding: 0;
margin: 0;
transition: all 750ms ease;
left: 0;
li {
position: relative;
height: 100%;
width: calc(80vw);
float: left;
&:nth-child(1) {
background-color: $color1;
}
&:nth-child(2) {
background-color: $color2;
}
&:nth-child(3) {
background-color: $color3;
}
&:nth-child(4) {
background-color: $color4;
}
&:nth-child(5) {
background-color: $color5;
}
}
}
#prev, #next{
width: 50px;
line-height: 50px;
border-radius: 50%;
font-size: 2rem;
text-shadow: 0 0 20px rgba(0,0,0,0.6);
text-align: center;
color: white;
text-decoration: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 150ms ease;
&:hover {
background-color: rgba(0,0,0,0.5);
text-shadow: 0;
}
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
}
View Compiled
var responsiveSlider = function() {
var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");
window.addEventListener('resize', function() {
sliderWidth = slider.offsetWidth;
});
var prevSlide = function() {
if(count > 1) {
count = count - 2;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if(count = 1) {
count = items - 1;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
};
var nextSlide = function() {
if(count < items) {
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if(count = items) {
slideList.style.left = "0px";
count = 1;
}
};
next.addEventListener("click", function() {
nextSlide();
});
prev.addEventListener("click", function() {
prevSlide();
});
setInterval(function() {
nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.