Automatic Responsive Slideshow Plugin For jQuery - fadeImg

File Size: 4.81 KB
Views Total: 3717
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Automatic Responsive Slideshow Plugin For jQuery - fadeImg

fadeImg.js is a really small jQuery plugin that helps you create a responsive, automatic, cross-fading background-image slideshow on the webpage.


  • Autoplay.
  • Cross browser.
  • Custom transition delay.
  • Next/prev navigation.
  • Pagination dots.
  • onComplete callback function.
  • Fully responsive background images based on CSS.

How to use it:

1. Add the images you want to present as backgrounds to the html list:

<div class="slide">
    <li style="background-image:url(1.png)"></li>
    <li style="background-image:url(2.png)"></li>
    <li style="background-image:url(3.png)"></li>
    <li style="background-image:url(4.png)"></li>
    <li style="background-image:url(5.png)"></li>

2. Place jQuery library and the jQuery fadeImg.js plugin at the bottom of the webpage.

<script src="//"></script>
<script src="js/jquery.fadeImg.js"></script>

3. Call the function on the top DIV container to initialize the slideshow.


4. The required CSS to style the slideshow. Modify or override and then add the following CSS snippets in your existing CSS file:

.slide {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;

.slide ul {
  margin: 0 auto;
  height: 382px;

.slide ul li {
  width: 100%;
  list-style: none;
  position: absolute;
  z-index: 1;
  height: 400px;
  background-position: top center;
  top: 0;
  left: 0;
  right: 0;

.slide #dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 30px;
  z-index: 9999;
  font-size: 0;
  text-align: center;
  opacity: 0.7;

.slide #dots a {
  background: #333;
  margin: 0 6px;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 1px 0 #333;
  border-radius: 100%;
  display: inline-block;
  cursor: pointer;

.slide #dots { background: #FFF; }

.slide .arrow {
  position: absolute;
  top: 50%;
  width: 70px;
  height: 100px;
  margin-top: -50px;
  background: #FFF;
  z-index: 999;
  opacity: 0.7;
  line-height: 100px;
  color: #333;
  text-align: center;
  text-decoration: none;

.slide .arrow.prev { left: 0; }

.slide { right: 0; }

.slide .arrow:active {
  background: #FAFAFA;
  opacity: 1;

5. Possible plugin options with default values.


  // interval
  time: 2000,

  // animation speed
  fade: 1000,

  // enable pagination dots
  dots: true,

  // enabble navigation
  arrows: false, 

  // callback
  complete: function() {} 

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