Basic Image Slideshow With Fancy Animations - BSC Slider

BSC Slider is a jQuery plugin that converts a group of images into a basic slider/slideshow with support for 17 built-in transition animations and custom easing effects.

How to use it:

1. Include the BSC Slider plugin's files after jQuery library as usual.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.bscslider.js"></script>
<link rel="stylesheet" href="jquery.bscslider.css">

2. Include jQuery UI or jQuery easing plugin for more easing functions.

<!-- jQuery easing plugin -->
<script src="jquery.easing.min.js"></script>

<!-- Or jQuery UI -->
<script src="jquery-ui.min.js"></script>

3. Insert your images into the slider container.

<div class="slider slider-demo">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  ...
</div>

4. Initialize the plugin to create a default image slider/slideshow.

$('.slider-demo').bscSlider({
  // options here
});

5. Change the default transition effect. Available effects:

• 0-None
• 1-Fade
• 2-Slide Over to Top
• 3-Slide Over to Right
• 4-Slide Over to Bottom
• 5-Slide Over to Left
• 6-Slide to Right
• 7-Slide to Left
• 8-Slide to Top
• 9-Slide to Bottom
• 10-Slide Remove to Right
• 11-Slide Remove to Left
• 12-Slide Remove to Top
• 13-Slide Remove to Bottom
• 14-Parallax to Right
• 15-Parallax to Left
• 16-Parallax to Top
• 17-Parallax to Bottom 

$('.slider-demo').bscSlider({
  effect: 17
});

6. Add a custom easing effect to the slider/slideshow.

$('.slider-demo').bscSlider({
  easing: 'easeOutQuad'
});

7. Enable the navigation to show next/prev arrows. Requires Font Awesome.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

$('.slider-demo').bscSlider({
  navigation: true
});

8. More configuration options with default values.

$('.slider-demo').bscSlider({

  // autoplay
  autoplay    : true,  

  // animation duration
  duration    : 6000, 

  // transition speed
  effect_speed  : 750, 
  
  // height of the slider
  height      : 300
  
});

---

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