Lightweight jQuery Auto-scrolling Slideshow Plugin - slideJquery

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

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.