Responsive jQuery Image Carouse Slider With Focus Effects - bigSlider

File Size: 4.23 MB
Views Total: 2672
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive jQuery Image Carouse Slider With Focus Effects - bigSlider

bigSlider is a simple, lightweight, responsive jQuery image carousel / slider plugin that has the ability to highlight or enlarge the current image when focused on.

How to use it:

1. Put the latest version of jQuery library and jQuery bigSlider plugin's script at the bottom of your webpage.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery-bigSlider.js"></script>

2. Insert the images you want to present into a container element like this:

<div id='container'>
  <img src='1.jpg'/>
  <img src='2.jpg'/>
  <img src='3.jpg'/>
  <img src='4.jpg'/>
  <img src='5.jpg'/>
</div>

3. Call the bigSlider function on the container element to initialize the carousel.

$('#container').bigSlider();

4. Change the default focus effect to 'enlarge'.

$('#container').bigSlider({
  focusType: 'enlarge'
});

5. Override the default delay in milliseconds between each image.

$('#container').bigSlider({
  animationDuration: 200
});

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