<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Page Slider - By Aries</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
<style>
* {
box-sizing: border-box;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Slides Background Color */
.slide-1 {
background: #deb8af;
left: 0;
}
.slide-2 {
background: #deb8af;
left: 100%
}
.slide-3 {
background: #deb8af;
left: 200%
}
.slide-4 {
background: #deb8af;
left: 300%;
}
.slider {
display: flex;
justify-content: flex-start;
}
.slider-content {
width: 635px;
padding-left: 100px;
}
/* Slider Inner Slide Effect */
.slider h2 {
color: #333333;
font-weight: 900;
text-transform: capitalize;
font-size: 60px;
font-weight: 300;
line-height: 1.2;
opacity: 0;
/* -webkit-transform: translateX(500px);
transform: translateX(500px); */
margin-top: 0;
letter-spacing: 2px;
}
.slider h4 {
font-size: 22px;
font-family: "Oswald";
color: rgba(51, 51, 51, 0.349);
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
opacity: 0;
/* -webkit-transform: translateX(500px);
transform: translateX(500px); */
}
.slider>img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
/* -webkit-transform: translateX(500px);
transform: translateX(500px); */
}
.slide-1>img {
right: 0;
}
.slider-content a {
background-color: #ea2e49;
width: 50%;
height: 50px;
border-radius: 30px;
border: none;
font-family: Montserrat;
font-size: 20px;
font-weight: 100;
color: #fff;
text-align: left;
padding-left: 35px;
position: relative;
cursor: pointer;
transition: all .2s;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-weight: bold;
}
.slider-content a:hover {
box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
}
.slider .slider-content a:focus,
.navigation .login-btn:focus {
outline: none;
}
/* Slider Pagger */
.slider-pagination {
position: absolute;
bottom: 30px;
width: 575px;
left: 100px;
z-index: 1000;
display: flex;
align-items: center;
}
.slider-pagination label {
width: 15px;
height: 10px;
border-radius: 5px;
display: inline-block;
background: #fff;
margin: 0 10px;
cursor: pointer;
}
/* Slider Pagger Event */
.slide-radio1:checked~.slider-pagination .page1,
.slide-radio2:checked~.slider-pagination .page2,
.slide-radio3:checked~.slider-pagination .page3,
.slide-radio4:checked~.slider-pagination .page4 {
width: 20px;
height: 10px;
border: 2px solid #ea2e49;
background: transparent;
border-radius: 5px;
}
/* Slider Slide Effect */
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked~.slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked~.slide-1 h2,
.slide-radio2:checked~.slide-2 h2,
.slide-radio3:checked~.slide-3 h2,
.slide-radio4:checked~.slide-4 h2,
.slide-radio1:checked~.slide-1 h4,
.slide-radio2:checked~.slide-2 h4,
.slide-radio3:checked~.slide-3 h4,
.slide-radio4:checked~.slide-4 h4,
.slide-radio1:checked~.slide-1>img,
.slide-radio2:checked~.slide-2>img,
.slide-radio3:checked~.slide-3>img,
.slide-radio4:checked~.slide-4>img {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
/* Responsive */
@media only screen and (max-width: 768px) {
.slider h2 {
font-size: 20px;
}
.slider h4 {
font-size: 16px;
}
.slider-content {
padding: 0 2%
}
.number-pagination {
right: 2%;
}
.slider-pagination {
left: 2%;
}
.slider .slider-content a {
padding: 0 15px;
width: 175px;
height: 42px;
}
.slider .slider-content a:after {
top: 15px;
}
.slider>img {
right: 0;
}
.slide-1>img {
right: -110px;
}
}
.slider-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
</style>
</head>
<body>
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<!-- Slider Pagination -->
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<!-- Slider #1 -->
<div class="slider slide-1">
<img src="https://designmodo.com/demo/full-screen-slider/images/model-2.png" alt="">
<div class="slider-content">
<a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
</div>
</div>
<!-- Slider #2 -->
<div class="slider slide-2">
<img src="https://designmodo.com/demo/full-screen-slider/images/model-3.png" alt="">
<div class="slider-content">
<a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
</div>
</div>
<!-- Slider #3 -->
<div class="slider slide-3">
<img src="https://designmodo.com/demo/full-screen-slider/images/model-4.png" alt="">
<div class="slider-content">
<a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
</div>
</div>
<!-- Slider #4 -->
<div class="slider slide-4">
<img src="https://designmodo.com/demo/full-screen-slider/images/model-1.png" alt="">
<div class="slider-content">
<a data-offline="false" data-params="" data-state="xdelivery-home">CLICK HERE</a>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script>
var TIMEOUT = 8000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.next('input[class*="slide-radio"]')
.attr('checked', true);
}
}
</script>
</body>
</html>