October 6, 2024
Hot News

Full Page Responsive Jquery Slideshow With Blur Transitions – JS Slider

adminc03 mins
background-image-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.

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

See live demo and download source code.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News

Top