
slideWiz is an elegant, dynamic jQuery slideshow/carousel plugin that enables you to flip or fade through a collection of images (with descriptions, titles and action buttons) passed in a JavaScript array.
1. Insert jQuery JavaScript library and the jQuery slideWiz plugin's file into the html file.
<link href="css/slideWiz.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/slideWiz.js"></script>
2. Create a container for the slideshow.
<div class="slide-container"></div>
3. Define your own slide data as follows:
var mySlides = [ { src: "1.jpg", title: 'Slide 1', desc: 'Description 1', btnTitle: 'Action Button', btnUrl: 'https://www.jqueryscript.net/' },{ src: "2.jpg", title: 'Slide 2', desc: 'Description 2', btnTitle: 'Action Button', btnUrl: 'https://www.jqueryscript.net/' },{ src: "3.jpg", title: 'Slide 3', desc: 'Description 3', btnTitle: 'Action Button', btnUrl: 'https://www.jqueryscript.net/' },{ src: "4.jpg", title: 'Slide 4', desc: 'Description 4', btnTitle: 'Action Button', btnUrl: 'https://www.jqueryscript.net/' }, // more slides here ]
4. Initialize the slideshow and done.
$('.slide-container').slideWiz({ file: mySlides })
5. Enable the autoplay functionality.
$('.slide-container').slideWiz({ file: mySlide, auto: true, speed: 3000 // in ms })
6. Specify the transition effect you want to use. Available transition effects:
- fade
- card
- box3D
$('.slide-container').slideWiz({ file: mySlide, type : 'box3D' })
This awesome jQuery plugin is developed by Wisdom955. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 02.05.2018
- Source