Elegant Dynamic Slideshow/Carousel Plugin - jQuery slideWiz

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.