Tiny Image Carousel Slider Plugin With jQuery - gallerySlider

gallerySlider is a very small jQuery image carousel / slider plugin that features auto rotation, infinite loop, image auto cropping and navigation controls.

How to use it:

1. Wrap the images into a links and then insert them into a DIV container as follows:

<div class="gallerySlider">
  <a href="#"><img src="1.jpg" alt="image"></a>
  <a href="#"><img src="2.jpg" alt="image"></a>
  <a href="#"><img src="3.jpg" alt="image"></a>
  ...
</div>

2. Include both jQuery JavaScript library and the jQuery gallerySlider plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="js/gallerySlider.js"></script>

3. The required CSS to style the image slider.

.gallerySlider {
  width: 600px;
  height: 450px;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}

.gallerySliderContainer { position: absolute; }

.gallerySliderImg { }

.gallerySliderImg img { }

.gallerySliderLeft, .gallerySliderRight {
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
}

.gallerySliderLeft {
  background-image: url("../images/slider/galleryButtonLeft.png");
  left: 40px;
}

.gallerySliderLeft:hover { background-image: url("../images/slider/galleryButtonLeft.png"); }

.gallerySliderRight {
  background-image: url("../images/slider/galleryButtonRight.png");
  right: 40px;
}

.gallerySliderRight:hover { background-image: url("../images/slider/galleryButtonRight.png"); }

.gallerySliderSwitchPanel { position: absolute; }

.gallerySliderSwitch {
  background-image: url("../images/slider/galleryButtonEmpty.png");
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0px 5px 0px 0px;
}

.gallerySliderSwitch:hover { background-image: url("../images/slider/galleryButtonEmpty.png"); }

#gallerySliderSelected { background-image: url("../images/slider/galleryButtonFilled.png"); }

4. Override the default parameters in the gallerySlider.js:

var slideDuration = 500;
var slideTimeout = 3000;
var navigationFadeIn = 500;
var navigationFadeOut = 500;
var navigationOpacityIn = 1.0;
var navigationOpacityOut = 0.0;
var navigationPanelOpacityIn = 1.0;
var navigationPanelOpacityOut = 0.5;
var gallerySliderImg = 0;
var gallerySliderCount = 0;
var galleryWidth = 0;
var galleryHeight = 0;
var slideBorder = 0; // 0 - inner, 1 - on right, 2 - on left
var activeButton = null;
var slideTimer = null;

---

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