Lightweight jQuery Auto-scrolling Slideshow Plugin - slideJquery

Lightweight jQuery Auto-scrolling Slideshow Plugin - slideJquery
File Size: 2.32 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A lightweight, straightforward jQuery slideshow which allows to loop through a list of images with support for arrows navigation and image captions.

How to use it:

1. Load the jQuery slideJquery plugin after jQuery Javascript library.

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

2. Insert a list of images together with image captions and arrows navigation into your web page as follows.

<section id="gallery" >
    <section id="buttons" >
      <a href="#"class="prev">&laquo;</a> 
      <a href="#"class="next">&raquo;</a> 
    </section>

    <ul>
      <li>
        <span> Image Caption 1. </span> 
	<img src="img/1.jpg">
      </li>
      <li>
        <span> Image Caption 2. </span> 
	<img src="img/2.jpg">
      </li>
      <li>
        <span> Image Caption 31. </span> 
	<img src="img/3.jpg">
      </li>
      <li>
        <span> Image Caption 4. </span> 
	<img src="img/4.jpg">
      </li>
    </ul>

</section>

3. The basic CSS to style the image slideshow.

section#gallery {
  background: #fff;
  width: 700px;
  height: 400px;
  display: block;
  overflow: hidden;
  box-shadow: #999 0 0 20px;
  margin: 25px;
}

section#gallery section#buttons {
  display: none;
  position: absolute;
  margin: 5px;
  z-index: 500;
}

section#gallery section#buttons a {
  background: #AD47A5;
  width: 50px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font: 22pt arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
  opacity: 0.7;
}

section#gallery section#buttons a:hover { background: #F28AEA; }

section#gallery ul {
  list-style: none;
  display: table;
  position: relative;/* width:999% */
}

section#gallery ul li {
  width: 700px;
  height: 400px;
  display: inline-block;
  position: relative;
}

section#gallery ul li img {
  width: 100%;
  height: 100%;
}

section#gallery ul li span {
  background: #AD47A5;
  width: 660px;
  display: table;
  padding: 10px;
  opacity: 0.7;
  position: absolute;
  bottom: 0;
  margin: 10px;
  font: 12pt "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
  color: #fff;
}

4. Feel free to modify/override the CSS as shown above to create your own styles.


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