Super Simple jQuery Slideshow Plugin with CSS3 Transitions - Shiner

Shiner is a minimal and easy-to-use jQuery plugin for creating a simple slideshow with cross-fading animations on your web page. Shiner takes advantage of CSS3 transition property to changes the opacity of the items in the slideshow to implement the cross-fading effects.

How to use it:

1. Include jQuery library and jQuery shiner plugin on the web page

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="shiner.js"></script>

2. Markup html structure

<div class="container">
<div class="slideshow" > 
<img src="1.jpg" class="group"/> 
<img src="2.jpg" class="group"/> 
<img src="3.jpg" class="group"/>
</div>
<div class="box">&nbsp;</div>
</div>

3. The CSS for the container

.container {
position: relative;
height: 215px;
width: 300px;
overflow: hidden;
}
.group2 {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
max-width: 100%;
}
.box {
background: transparent;
border: black solid 4px;
position: absolute;
left: 0px;
top: 0px;
width: 292px;
height: 207px;
}

4. The CSS for the animations

.trans-spec {
-moz-transition: opacity 4s;
-webkit-transition: opacity 4s;
-o-transition: opacity 4s;
transition: opacity 4s;
}
.fast {
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}

5. The javascript

$('.slideshow .group').shiner({ 
// The class to apply to set the transition properties
transClass: "trans-spec",
// The delay between the changes in slides
delay: 5000, 					
visibleZIndex: 1,
invisibleZIndex: 0
});

Change log:

2014-11-30

• v1.0.3

---

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