Demo for Cascade Slider With Text

Preview
Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@charset "UTF-8";

*::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: linear-gradient(45deg, #0096eb, #9d00eb);;
}

h5, h6, p {
    margin: 0;
}

.text-muted {
    color: #bebfc1;
}

.cascade-slider {
    font-family: roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: #58595b;
    width: 750px;
    height: 550px;
}

.cascade-slider-item {
    display: flex;
    flex-flow: column nowrap;
    word-wrap: break-word;
    min-width: 0;
    max-width: 250px;
    height: 500px;
    background: #fff;
    background-clip: border-box;
    border: 1px solid #999999;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

    .cascade-slider-item > img {
        width: 100%;
    }

    .cascade-slider-item.slick-current {
        position: relative;
        -webkit-transform: scale(1);
        transform: scale(1);
        z-index: 1;
    }

    .cascade-slider-item:not(.slick-current) {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        filter: brightness(0.9);
    }

.cascade-slider-body {
    display: flex;
    flex-flow: column nowrap;
    height: 130px;
    padding: 10px 15px;
}

.cascade-slider-title {
    font-size: 22px;
    font-weight: 700;
}

.cascade-slider-subtitle {
    font-size: 14px;
    margin-bottom: 5px;
}

.cascade-slider-text {
    flex: 1;
    margin-bottom: 10px;
}

.star-rating {
    position: relative;
    width: 90px;
    display: inline-block;
    letter-spacing: 5px;
}

    .star-rating::before {
        display: block;
        font-family: FontAwesome;
        font-size: 14px;
        color: #999999;
        content: "";
    }

    .star-rating span {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        display: block;
        height: 100%;
        overflow: hidden;
    }

        .star-rating span::before {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            font-family: FontAwesome;
            font-size: 14px;
            color: #fcb832;
            content: "";
        }

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    display: flex;
    font-size: 0;
    line-height: 0;
    color: transparent;
    width: 35px;
    height: 40px;
    background: transparent;
    outline: none;
    cursor: pointer;
    border: 1px dashed transparent;
}

    .slick-prev::before,
    .slick-next::before {
        position: absolute;
        top: -6px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: FontAwesome;
        font-size: 44px;
        line-height: 1.25;
        color: #d9d9d9;
        -webkit-transition: color 0.4s ease;
        transition: color 0.4s ease;
    }

    .slick-prev:hover::before,
    .slick-next:hover::before {
        color: #3a676f;
    }

.slick-prev {
    left: -40px;
}

    .slick-prev:before {
        content: "";
    }

.slick-next {
    right: -40px;
}

    .slick-next:before {
        content: "";
    }

.slick-dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    margin: 20px 0;
    padding: 0;
}

    .slick-dots > li {
        display: inline-block;
        width: 30px;
        height: 10px;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots > li:nth-last-of-type(n + 1) {
            margin-left: 5px;
        }

        .slick-dots > li button {
            color: transparent;
            width: 30px;
            height: 10px;
            background: #d9d9d9;
            border: 1px solid #999999;
            border-radius: 0;
            outline: none;
            cursor: pointer;
        }

            .slick-dots > li button:hover, .slick-dots > li button:focus {
                background: #3a676f;
                border: 1px solid #0e191b;
                outline: none;
                -webkit-transition: all 0.4s ease;
                transition: all 0.4s ease;
            }

        .slick-dots > li.slick-active > button {
            background: #3a676f;
            border: 1px solid #0e191b;
        }
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'>
<section class="cascade-slider">
    <div class="cascade-slider-track">
        <!-- Slider Item > 1 -->
        <div class="cascade-slider-item">
            <img src="//gomnam1336.github.io/Slider/Casecade_Slider_With_Text/image1.png?text=FPO+1" alt="FPO 1" />
            <div class="cascade-slider-body">
                <h5 class="cascade-slider-title">FPO Title 1</h5>
                <h6 class="cascade-slider-subtitle text-muted">FPO Subtitle 1</h6>
                <p class="cascade-slider-text">Donec nec laoreet nunc, at vehicula purus. Integer sollicitudin placerat.</p>
                <div class="star-rating">2.35</div>
            </div>
        </div>
        <!--/ Slider Item > 1 -->
        <!-- Slider Item > 2 -->
        <div class="cascade-slider-item">
            <img src="http://devanswer.com/codes/files/apple1.png" alt="FPO 2" />
            <div class="cascade-slider-body">
                <h5 class="cascade-slider-title">FPO Title 2</h5>
                <h6 class="cascade-slider-subtitle text-muted">FPO Subtitle 2</h6>
                <p class="cascade-slider-text">Proin porta, urna id elementum imperdiet, odio nunc rutrum leo, eget gravida.</p>
                <div class="star-rating">4.25</div>
            </div>
        </div>
        <!--/ Slider Item > 2 -->
        <!-- Slider Item > 3 -->
        <div class="cascade-slider-item">
            <img src="http://devanswer.com/codes/files/apple2.png" alt="FPO 3" />
            <div class="cascade-slider-body">
                <h5 class="cascade-slider-title">FPO Title 3</h5>
                <h6 class="cascade-slider-subtitle text-muted">FPO Subtitle 3</h6>
                <p class="cascade-slider-text">Ut ornare neque ac velit volutpat feugiat. Morbi ut felis nisi. Suspendisse.</p>
                <div class="star-rating">2.50</div>
            </div>
        </div>
        <!--/ Slider Item > 3 -->
        <!-- Slider Item > 4 -->
        <div class="cascade-slider-item">
            <img src="http://devanswer.com/codes/files/apple3.png" alt="FPO 4" />
            <div class="cascade-slider-body">
                <h5 class="cascade-slider-title">FPO Title 4</h5>
                <h6 class="cascade-slider-subtitle text-muted">FPO Subtitle 4</h6>
                <p class="cascade-slider-text">Cras vel ultrices ex. Sed sollicitudin quam nunc, dapibus lacinia est mattis.</p>
                <div class="star-rating">4.25</div>
            </div>
        </div>
        <!--/ Slider Item > 4 -->
        <!-- Slider Item > 5 -->
        <div class="cascade-slider-item">
            <img src="http://devanswer.com/codes/files/apple1.png" alt="FPO 5" />
            <div class="cascade-slider-body">
                <h5 class="cascade-slider-title">FPO Title 5</h5>
                <h6 class="cascade-slider-subtitle text-muted">FPO Subtitle 5</h6>
                <p class="cascade-slider-text">Nullam dictum accumsan laoreet. Vivamus luctus urna erat, nec congue tellus dapibus egestas.</p>
                <div class="star-rating">3.35</div>
            </div>
        </div>
        <!--/ Slider Item > 5 -->
        <!-- Slider Item > 6 -->
        <div class="cascade-slider-item">
            <img src="http://devanswer.com/codes/files/apple2.png" alt="FPO 6" />
            <div class="cascade-slider-body">
                <h5 class="cascade-slider-title">FPO Title 6</h5>
                <h6 class="cascade-slider-subtitle text-muted">FPO Subtitle 6</h6>
                <p class="cascade-slider-text">Nunc id purus eget dolor cursus finibus ut vel lacus. Sed eu semper sem. In.</p>
                <div class="star-rating">3.0</div>
            </div>
        </div>
        <!--/ Slider Item > 5 -->
    </div>
</section> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
console.log("Ready!");
// Star Rating
$.fn.rating = function () {
        let val = 0,
size = 0,
stars = 5;

return this.each(function (i, e) {
        val = parseFloat($(e).text());
size = $(e).width() / stars;

$(e).html($("<span />").animate({width: val * size }, 1000));
});
};

$(function () {

        // Initialize Slider
        $('.cascade-slider-track').slick({
            centerMode: true,
            centerPadding: '0px',
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: true,
            focusOnSelect: true
        });

// Initialize Star Rating
$('.star-rating').rating();
});
</script>

</body>
</html>
Other Codes

Touch Slider for Product

A beautiful slider that can be flipped with the touch of a hand on a touch device or mouse in a laptop and is very suitable for displaying store products.
Slider with Splitting Effect

A slider with splitting effect for transition.
Animating Slider with Communication Design

Slider for text, which has a bar on the right side of the slider that represents the slide show, and the slider bar items and the text of each slide are . . .
Slider with Parallax Animation

A beautiful handheld slider that is used to display your products and changes the animation of each slide, which gives a great effect to your work.