Full Page Responsive Jquery Slideshow With Blur Transitions – JS Slider

JS Slider is jQuery based responsive image slider with auto rotate, next previous, and switch to any slide feature. You can use this quick installation slider on your website to display dynamic pictures rotation as full page header with some HD images which makes your web pages more dynamic and attractive.
background-image-slider

Libraries

Include the following JS and CSS library on page.

<link rel="stylesheet" href="libs/@fortawesome/fontawesome-free/css/all.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="assets/js/main.js"></script>


HTML

Here is the html code for slide show with multiple images with next previous button and round circle to switch on any slide at any time.

<div id="slider" class="slider">
        <div class="slider-item active" style="background-image: url(assets/img/img1.jpg)"></div>
        <div class="slider-item" style="background-image: url(assets/img/img2.jpg)"></div>
        <div class="slider-item" style="background-image: url(assets/img/img3.jpg)"></div>
        <div class="slider-item" style="background-image: url(assets/img/img4.jpg)"></div>
        <div class="slider-item" style="background-image: url(assets/img/img5.jpg)"></div>
        <div class="slider-panel">
            <div class="slider-panel__navigation">
                <i class="fas fa-circle indicator active" data-slide-to="0"></i>
                <i class="far fa-circle indicator" data-slide-to="1"></i>
                <i class="far fa-circle indicator" data-slide-to="2"></i>
                <i class="far fa-circle indicator" data-slide-to="3"></i>
                <i class="far fa-circle indicator" data-slide-to="4"></i>
            </div>
            <div class="slider-panel__controls">
                <i class="far fa-arrow-alt-circle-left" id="previous"></i>
                <i class="far fa-pause-circle" id="pause-play"></i>
                <i class="far fa-arrow-alt-circle-right" id="next"></i>
            </div>
        </div>
    </div>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by MaksimBorovik, Visit their official github repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.