anonystick/Full page slider with css and javascript

## Full page slider with css and javascript
<!doctype html>
<html>

<head>
    <title>Full page slider with css and javascript</title>
</head>
<style type="text/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;
}
</style>


<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://i.ibb.co/bJPWHHp/powerpuff-girls-56a00bc45f9b58eba4aea61d.jpg">
                </div>
                <div class="slide-text">
                    <p>
                        So Good!
                    </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://i.ibb.co/MkSbTjV/juul-monster-0.jpg">
                </div>
                <div class="slide-text">
                    <p>
                         So Great!
                    </p>
                </div>
            </div>
        </div>
        <div class="slide slide-3">
            <div class="slide-bg"></div>
            <div class="slide-content">
                <div class="slide-image">
                    <img src="https://i.ibb.co/FwnvDsz/maxresdefault.jpg">
                </div>
                <div class="slide-text">
                    <p>
                        So Okay!
                    </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>
    <script type="text/javascript">
    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");
        }
    }
    </script>

</body>

</html>
	<!doctype html>
	<html>

	<head>
	<title>Full page slider with css and javascript</title>
	</head>
	<style type="text/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;
	}
	</style>



	<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://i.ibb.co/bJPWHHp/powerpuff-girls-56a00bc45f9b58eba4aea61d.jpg">
	</div>
	<div class="slide-text">
	<p>
	So Good!
	</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://i.ibb.co/MkSbTjV/juul-monster-0.jpg">
	</div>
	<div class="slide-text">
	<p>
	So Great!
	</p>
	</div>
	</div>
	</div>
	<div class="slide slide-3">
	<div class="slide-bg"></div>
	<div class="slide-content">
	<div class="slide-image">
	<img src="https://i.ibb.co/FwnvDsz/maxresdefault.jpg">
	</div>
	<div class="slide-text">
	<p>
	So Okay!
	</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>
	<script type="text/javascript">
	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");
	}
	}
	</script>

	</body>

	</html>