Basic Image Slideshow With Fancy Animations - BSC Slider

File Size: 5.95 KB
Views Total: 3327
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.