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.

How to use it:

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:

[
  {
      src: {
          main: "https://picsum.photos/1920/1200?image=1081",
          cover: "https://picsum.photos/1920/1200?image=1081"
      },
      title: 'slideWiz Library',
      desc: 'slideWiz is a JQuery based library created by a Nigerian by the name\n' +
      '                    \'Wisdom Emenike\' who currently works at Imaxinacion Tech, one of Nigeria\'s leading IT companies.',
      button: {
          text: 'Download',
          url: 'https://github.com/iamwizzdom/slideWiz',
          class: 'btn btn-medium btn-primary',
          color: '#3781ce'
      }
  },
  {
      src: {
          main: "https://picsum.photos/1920/1200?image=760",
          cover: "https://picsum.photos/1920/1200?image=760"
      },
      title: 'slideWiz Library',
      desc: 'slideWiz is a JQuery based library created by a Nigerian by the name\n' +
      '                    \'Wisdom Emenike\' who currently works at Imaxinacion Tech, one of Nigeria\'s leading IT companies.',
      button: {
          text: 'Goal.com',
          url: 'https://github.com/iamwizzdom/slideWiz',
          class: 'btn btn-medium btn-primary',
          color: '#3781ce'
      }
  },
  {
      src: {
          main: "https://picsum.photos/1920/1200?image=755",
          cover: "https://picsum.photos/1920/1200?image=755"
      },
      title: 'slideWiz Library',
      desc: 'slideWiz is a JQuery based library created by a Nigerian by the name\n' +
      '                    \'Wisdom Emenike\' who currently works at Imaxinacion Tech, one of Nigeria\'s leading IT companies.',
      button: {
          text: 'SuperSports',
          url: 'https://github.com/iamwizzdom/slideWiz',
          class: 'btn btn-medium btn-primary',
          color: '#3781ce'
      }
  },
  {
      src: {
          main: "https://picsum.photos/1920/1200?image=726",
          cover: "https://picsum.photos/1920/1200?image=726"
      },
      title: 'slideWiz Library',
      desc: 'slideWiz is a JQuery based library created by a Nigerian by the name\n' +
      '                    \'Wisdom Emenike\' who currently works at Imaxinacion Tech, one of Nigeria\'s leading IT companies.',
      button: {
          text: 'NBA.com',
          url: false,
          class: 'btn btn-medium btn-primary',
          color: '#3781ce'
      }
  }
]

var mySlides = [
    {
      src: {
        main: "1.jpg",
        cover: "1.jpg"
      },
      title: 'Slide 1',
      desc: 'Description 1',
      btnTitle: 'Action Button',
      button: {
        text: 'Button Text',
        url: false, // URL
        class: 'Button Class(es)',
        color: '#3781ce'
      }
    },{
      src: {
        main: "2.jpg",
        cover: "2.jpg"
      },
      title: 'Slide 2',
      desc: 'Description 2',
      btnTitle: 'Action Button',
      button: {
        text: 'Button Text',
        url: false, // URL
        class: 'Button Class(es)',
        color: '#3781ce'
      }
    },{
      src: {
        main: "3.jpg",
        cover: "3.jpg"
      },
      title: 'Slide 3',
      desc: 'Description 3',
      btnTitle: 'Action Button',
      button: {
        text: 'Button Text',
        url: false, // URL
        class: 'Button Class(es)',
        color: '#3781ce'
      }
    },
    // 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
• glide
• flip
• slice
• pixel

$('.slide-container').slideWiz({
  file: mySlide,
  type : 'box3D'
})

Changelog:

2019-08-27

• Bug fixes

2018-09-14

• added new animations (flip, slice, pixel)

---

This awesome jQuery plugin is developed by iamwizzdom. For more Advanced Usages, please check the demo page or visit the official website.