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.


 Bootstrap jQuery Full Screen Image Slider

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.