Skip to content

Instantly share code, notes, and snippets.

@shishirarora3

shishirarora3/index.html

Created April 6, 2019 06:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shishirarora3/e28453d7af0547c537ceee8c0eb6dbb3 to your computer and use it in GitHub Desktop.
Save shishirarora3/e28453d7af0547c537ceee8c0eb6dbb3 to your computer and use it in GitHub Desktop.
Download ZIP
WEEKLY CODING CHALLENGE - Full Page slider
Raw
index.html
<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()">&#10094</button>
<button type="button" class="btn-slide-next" onclick="nextSlide()">&#10095</button>
</div>
</body>
</html>
Raw
script.js
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");
}
}
Raw
style.css
* {
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;
}
Raw
weekly-coding-challenge-full-page-slider.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment