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.
<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"> <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.
|
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.
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.
