Basic jQuery Slideshow With Image Zooming Effect - slide.js

slide.js is a beautiful, lightweight jQuery slideshow / carousel plugin that comes with an image zooming effect using CSS3 transforms and transitions.

How to use it:

1. Add jQuery library and the jQuery slide.js script to your webpage.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="src/jquery.slide.js"></script>

2. Create a list of images for your slideshow.

<div id="slideshow-banner">
  <ul>
    <li class="slideshow-item">
      <img src="1.jpg">
    </li>
    <li class="slideshow-item">
      <img src="2.jpg">
    </li>
    <li class="slideshow-item">
      <img src="3.jpg">
    </li>
  </ul>
</div>

3. The primary CSS styles for the slideshow.

#slideshow-banner ul { position: relative; }

#slideshow-banner ul .slideshow-item { position: absolute }

.slideshow-transform {
  transform: scale(1.1, 1.1);
  transition: transform 8s;
}

4. Style & position the slideshow controls.

#slideshow-controller {
  position: absolute;
  bottom: 10px;
  left: 50%;
}

#controller-left {
  position: absolute;
  left: 2%;
  top: 45%;
  cursor: pointer;
}

#controller-right {
  position: absolute;
  right: 2%;
  top: 45%;
  cursor: pointer;
}

.controller-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #f00;
  margin-right: 10px;
  border-radius: 10px;
  opacity: 0.5;
  cursor: pointer;
}

.controller-item-hover {
  opacity: 1;
  background: #ccc;
  transform: rotateX(360deg);
  transition: transform 2s;
}

5. Call the function on the top container and done.

$('#slideshow-banner').slide();

6. Change the default transition delay time.

$('#slideshow-banner').slide({
  cdTime : 5000 // in ms
});

7. Change the default navigation images.

$('#slideshow-banner').slide({
  controllerLeftButton : "left.png", 
  controllerRightButton : "right.png"
});

---

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