A Pen by ErnestasBaltinas on CodePen.
Created
April 6, 2019 06:05
-
-
Save shishirarora3/e28453d7af0547c537ceee8c0eb6dbb3 to your computer and use it in GitHub Desktop.
WEEKLY CODING CHALLENGE - Full Page slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title> | |
Hello Slider | |
</title> | |
</head> | |
<body> | |
<div class="slider"> | |
<div class="slide slide-1"> | |
<div class="slide-bg"></div> | |
<div class="slide-content"> | |
<div class="slide-image"> | |
<img src="https://newsdeeply.imgix.net/20170713072433/IS09AX2F9.jpg"> | |
</div> | |
<div class="slide-text"> | |
<p> | |
They can hold their breath for five hours underwater. | |
</p> | |
</div> | |
</div> | |
</div> | |
<div class="slide slide-2"> | |
<div class="slide-bg"></div> | |
<div class="slide-content"> | |
<div class="slide-image"> | |
<img src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/ecddf7a133be423a89184f4675fe8a58"> | |
</div> | |
<div class="slide-text"> | |
<p> | |
Foxes eat just about anything, including berries, worms, spiders and small animals such as mice and birds. | |
</p> | |
</div> | |
</div> | |
</div> | |
<div class="slide slide-3"> | |
<div class="slide-bg"></div> | |
<div class="slide-content"> | |
<div class="slide-image"> | |
<img src="http://www.wallpapers13.com/wp-content/uploads/2016/02/Bald-Eagle-blue-sky-spread-wings-sharp-claws-Hd-wallpaper-915x515.jpg"> | |
</div> | |
<div class="slide-text"> | |
<p> | |
The largest known kill by an eagle was a dulker deer weighing 37 kg - which was 7-8 times the weigth of the Martial Eagle that killed it. | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="slider-controls"> | |
<button type="button" class="btn-slide-previous" onclick="previousSlide()">❮</button> | |
<button type="button" class="btn-slide-next" onclick="nextSlide()">❯</button> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.addEventListener("DOMContentLoaded", function(){ | |
setTimeout(function() { | |
document.querySelector(".slide").classList.add("active"); | |
}, 500) | |
}); | |
function nextSlide() { | |
let currSlide = document.querySelector(".slide.active"), | |
nextSlide = currSlide.nextElementSibling; | |
currSlide.classList.remove("active"); | |
if(nextSlide) { | |
nextSlide.classList.add("active"); | |
} else { | |
document.querySelectorAll(".slide")[0].classList.add("active"); | |
} | |
} | |
function previousSlide() { | |
let currSlide = document.querySelector(".slide.active"), | |
prevSlide = currSlide.previousElementSibling, | |
slideCount = document.querySelectorAll(".slide").length; | |
currSlide.classList.remove("active"); | |
if(prevSlide) { | |
prevSlide.classList.add("active"); | |
} else { | |
document.querySelectorAll(".slide")[slideCount - 1].classList.add("active"); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
font-family: sans-serif; | |
} | |
body { | |
margin: 0; | |
} | |
.slider { | |
width: 100%; | |
height: 100vh; | |
} | |
.slide { | |
width: 100%; | |
height: 0; | |
display: flex; | |
visibility: hidden; | |
overflow: hidden; | |
} | |
.slide.active { | |
display:flex; | |
height: 100%; | |
visibility: visible | |
} | |
.slide-bg { | |
height: 100%; | |
clip-path: polygon(0 0, 0 90%, 150% 0%); | |
z-index: 1; | |
position: absolute; | |
top: -100%; | |
width: 100%; | |
} | |
.slide.active > .slide-bg { | |
top: 0; | |
-webkit-transition: all 1s ease; | |
-moz-transition: all 1s ease; | |
-ms-transition: all 1s ease; | |
-o-transition: all 1s ease; | |
transition: all 1s ease; | |
} | |
.slide-image > img { | |
z-index: 2; | |
opacity: 0; | |
} | |
.slide.active .slide-image > img { | |
opacity: 1; | |
-webkit-transition: opacity 2ss ease-in; | |
-moz-transition: opacity 2s ease-in; | |
-ms-transition: opacity 2s ease-in; | |
-o-transition: opacity 2s ease-in; | |
transition: opacity 2s ease-in; | |
} | |
.slide-image > img { | |
max-height: 100%; | |
max-width: 100%; | |
z-index: 1; | |
} | |
.slide-content { | |
max-width: 900px; | |
max-height: 90%; | |
margin: auto; | |
z-index: 2; | |
position: relative; | |
padding-left: 150px; | |
} | |
.slide-image-bg { | |
width: 0; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
z-index: 1 | |
} | |
.slide.active .slide-image-bg { | |
width: 100%; | |
-webkit-transition: all 1s ease; | |
-moz-transition: all 1s ease; | |
-ms-transition: all 1s ease; | |
-o-transition: all 1s ease; | |
transition: all 1s ease; | |
} | |
.slide-text { | |
background-color: #fff; | |
padding: 1em 2em; | |
position: absolute; | |
top: 40%; | |
left: -100%; | |
z-index: 3; | |
width: 250px; | |
box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.2); | |
text-align: justify; | |
} | |
.slide.active .slide-text { | |
left: 0; | |
-webkit-transition: all 2s ease; | |
-moz-transition: all 2s ease; | |
-ms-transition: all 2s ease; | |
-o-transition: all 2s ease; | |
transition: all 2s ease; | |
} | |
.slide-1 .slide-text { | |
border-left: 10px solid darkslategray; | |
} | |
.slide-1 .slide-bg{ | |
background-color: cadetblue; | |
} | |
.slide-2 .slide-text { | |
border-left: 10px solid burlywood; | |
} | |
.slide-2 .slide-bg{ | |
background-color: antiquewhite; | |
} | |
.slide-3 .slide-text { | |
border-left: 10px solid darkslateblue; | |
} | |
.slide-3 .slide-bg{ | |
background-color: deepskyblue; | |
} | |
.slider-controls { | |
position: absolute; | |
z-index: 5; | |
bottom: 25px; | |
right: 25px; | |
} | |
.btn-slide-next, .btn-slide-previous { | |
cursor: pointer; | |
width: 60px; | |
height: 50px; | |
color: #000; | |
font-weight: bold; | |
font-size: 20px; | |
transition: 0.6s ease; | |
user-select: none; | |
background-color: #fff; | |
border: 1px solid #000; | |
} | |
.btn-slide-previous:hover, .btn-slide-next:hover { | |
background-color: #000; | |
border: 1px solid #fff; | |
color:#fff; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment