Разработка - Линейный слайдер | Все для вебмастера

Делаем разметку HTML:

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>

Пишем стиль:

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;
}
[CODE=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");
    }
}

Смотрим наше результат:

.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;
}[/CODE]
Придаем динамику:

Разработка Линейный слайдер

Ещё ресурсы от baltun