<div class="slider" id="slider" data-width="100">
<button class="control_next">→</button>
<button class="control_prev">←</button>
<ul>
<li class="actslide">
<div class="slide" style="background: #90cc82" >
<div class="shadow">
<div class="teaser">
<h3>Fullscreen Slider</h3>
<h2>Slide 1</h2>
<p>Slide #1 of 3</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide" style="background: #02517a" >
<div class="shadow">
<div class="teaser">
<h3>Fullscreen Slider</h3>
<h2>Slide 2</h2>
<p>Slide #2 of 3</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide" style="background: #c4af03" >
<div class="shadow">
<div class="teaser">
<h3>Fullscreen Slider</h3>
<h2>Slide 3</h2>
<p>Slide #3 of 3</p>
</div>
</div>
</div>
</li>
</ul>
<div class="progress">
<div class="bar"></div>
</div>
</div>
$ih: 100vh; // Slider height
.slider {
position: relative;
}
#slider {
position: relative;
overflow: hidden;
width: 100% !important;
ul {
position: relative;
margin: 0;
padding: 0;
height: $ih;
width: 99999px;
overflow: hidden;
list-style: none;
li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 100vw;
height: $ih;
text-align: center;
.slide {
background-size: cover;
height: $ih;
}
}
}
}
button.control_prev, button.control_next {
position: absolute;
top: 50%;
z-index: 10;
display: block;
border: none; width: 2em;
height: 2em;
line-height: 1.9em;
background: rgba(#fff, .30);
color: #fff;
text-align: center;
text-decoration: none;
font-weight: 600;
font-size: 2rem;
opacity: 0.8;
cursor: pointer;
border-radius: 50%;
transform: translateY(-50%);
&:focus {
outline: none;
border: 1px rgba(255,255,255,.5) solid;
}
&:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
}
button.control_prev {
left: 2rem;
}
button.control_next {
right: 2rem;
}
.progress {
position: absolute;
background: rgba(255,255,255,.3);
height: .5rem;
width: 100%;
bottom: 0;
border-top: 1px rgba(0,0,0,.15) solid;
.bar {
height: 100%;
width: 0%;
background: #fff;
}
}
.teaser {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
color: #fff;
transform: translateY(-50%);
h2 {
font-size: 5em;
text-transform: uppercase;
line-height: 1.5em;
color: #fff;
}
p {
font-size: 1.3em;
line-height: 1.3em;
border-top: 2px #fff solid;
width: 33%;
min-width: 25rem;
margin: 0rem auto;
padding: 1.5rem 0;
}
h3 {
border-bottom: 2px #fff solid;
width: 33%;
padding: 1.5rem 0;
margin: 0rem auto;
min-width: 25rem;
}
a {
margin-left: .5rem;
margin-right: .5rem;
}
}
//Based on https://codepen.io/zuraizm/pen/vGDHl pen by zuraiz
jQuery(document).ready(function ($) {
startSlider($('#slider'), 30); // Slide container ID, SlideShow interval
function startSlider(obj, timer) {
var obj, timer;
var id = "#"+obj.attr("id");
var slideCount = obj.find('ul li').length;
slideWidth = obj.attr("data-width");
var sliderUlWidth = (slideCount+1) * slideWidth;
var time = 2;
var $bar,
isPause,
tick,
percentTime;
isPause = false; //false for auto slideshow
$bar = obj.find('.progress .bar');
function startProgressbar() {
resetProgressbar();
percentTime = 0;
tick = setInterval(interval, timer);
}
function interval() {
if (isPause === false) {
percentTime += 1 / (time + 0.1);
$bar.css({
width: percentTime + "%"
});
if (percentTime >= 100) {
moveRight();
startProgressbar();
}
}
}
function resetProgressbar() {
$bar.css({
width: 0 + '%'
});
clearTimeout(tick);
}
function startslide() {
$(id+' ul li:last-child').prependTo(id+' ul');
obj.find('ul').css({ width: sliderUlWidth+'vw', marginLeft: - slideWidth+'vw' });
obj.find('ul li:last-child').appendTo(obj.attr('id')+' ul');
}
if (slideCount>1) {
startslide();
startProgressbar();
}
else { // hade navigation buttons for 1 slide only
$(id+' button.control_prev').hide();
$(id+' button.control_next').hide();
}
function moveLeft() {
$(id+' ul').css( { transition: "1s",
transform: "translateX(" + slideWidth + "vw)"
});
setTimeout( function() {
$(id+' ul li:last-child').prependTo(id+' ul');
$(id+' ul').css( { transition: "none",
transform: "translateX(" + 0 + "vw)"
});
$('li.actslide').prev().addClass('actslide').next().removeClass('actslide');
}, 1000 );
}
function moveRight2() { // fix for only 2 slades
$(id+' ul li:first-child').appendTo(id+' ul');
$(id+' ul').css( { transition: "none", transform: "translateX(100vw)"}).delay();
setTimeout( function() {
$(id+' ul').css( { transition: "1s", transform: "translateX(0vw)" });
}, 100, setTimeout( function() {
$(id+' ul').css( { transition: "none", transform: "translateX(0vw)" });
$('li.actslide').next().addClass('actslide').prev().removeClass('actslide');
}, 1000 ) );
}
function moveRight() {
if (slideCount>2) {
$(id+' ul').css( { transition: "1s",
transform: "translateX(" + (-1)*slideWidth + "vw)"
});
setTimeout( function() {
$(id+' ul li:first-child').appendTo(id+' ul');
$(id+' ul').css( { transition: "none",
transform: "translateX(" + 0 + "vw)"
});
$('li.actslide').next().addClass('actslide').prev().removeClass('actslide');
}, 1000 );
}
else {
moveRight2();
}
}
$(id+' button.control_prev').click(function () {
moveLeft();
startProgressbar();
});
$(id+' button.control_next').click(function () {
moveRight();
startProgressbar();
});
$(id+' .progress').click(function() {
if (isPause === false) {
isPause = true;
}
else {
isPause = false;
}
});
};
});
External CSS
This Pen doesn't use any external CSS resources.