Create Bootstrap jQuery Full Screen Image Slider – image-slider.js
Do you want to add Full Screen Image slider on your website then In this post I am going share awesome jQuery Plugin to add full screen image slider on your website to showcase your images.This is fully responsive and fullscreen automatic image slider/rotator/carousel plugin slide images with zoom in/out effects and you can also manually navigate images with next and previous buttons.
Integrate jQuery Full Screen Image Slider
Libraries
Include all the required libraries on page with dependencies.
<!--CSS--> <link rel="stylesheet" type="text/css" href="css/image-slider.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--JS--> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="js/image-slider.js"></script> |
HTML
Create HTML div container for image slideshow with next and previous navigation and pagination bullets.
<div id="slider-main"> <!-- previous button --> <button id="prev"><i class="fa fa-angle-double-left"></i></button> <!-- image container --> <div id="slider"></div> <!-- next button --> <button id="next"><i class="fa fa-angle-double-right"></i></button> <!-- small circles container --> <div id="circles"></div> </div> |
JS
Finally add your images in below javascript array and you can also set the custom image slideshow interval in image-slider.js
var arr=['1.jpg','2.jpg','3.jpg']; var interval=5000; |
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.