Basic Image Slideshow With Fancy Animations - BSC Slider

File Size: 5.95 KB
Views Total: 3363
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=""></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">

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

  // 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 
  effect: 17

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

  easing: 'easeOutQuad'

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

<link rel="stylesheet" href="">
  navigation: true

8. More configuration options with default values.


  // 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.