Lightweight Slideshow With Fade & Slide Transitions - slideshow.js

A simple, lightweight, and customizable slideshow plugin that displays your images in an elegant and smooth way.

It comes with several unique transitions (slide and crossfade) available for you to use, and it can be easily further customized via CSS.

How to use it:

1. Add images together with image captions and next/prev buttons to the slideshow container.

<div class="slideshow">

  <div class="slides-box">

    <!-- Slides -->
    <div class="slide">
      <p class="title">Slide 1</p>
      <img src="1.jpg" alt="image" title="image">
    </div>

    <div class="slide">
      <p class="title">Slide 2</p>
      <img src="2.jpg" alt="image" title="image">
    </div>

    <div class="slide">
      <p class="title">Slide 3</p>
      <img src="3.jpg" alt="image" title="image">
    </div>

    ... more slides here ...

  </div>

  <!-- Nav buttons -->
  <div class="slideshow-buttons">

    <div class="prev-btn">&larr;</div>
    <div class="next-btn">&rarr;</div>

  </div>

</div>

2. Download the plugin and insert the slideshow.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="slideshow.js"></script>

3. Initialize the slideshow plugin and determine which transition effects you wish to use: 'slide', 'fading', and 'photo'.

$('.slideshow').slideshowPlugin({
  effect: 'sliding',
  // more options here
});

4. Customize the styles of the slideshow via CSS.

.slideshow {
  width: 80%;
  max-width: 900px;
  height: 500px;
  background-color: black;
  margin: 20px auto;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.slides-box .slide .title {
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  padding: 20px 40px;
  text-align: left;
  border-top: 2px solid white;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  border-left: 8px solid white;
  font-size: 18px;
  font-weight: bold;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.slides-box .slide img {
  display: table;
}

.slideshow-buttons {
  color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.slideshow-buttons div {
  color: white;
  display: inline-block;
  font-size: 2em;
  padding: 10px;
  cursor: pointer;
}

.slideshow-buttons .next-btn {
  margin-left: 4%;
  transition: all ease-in-out 0.3s;
  text-shadow: 1px 1px 2px black;
}

.slideshow-buttons .next-btn:hover {
  transform: translateX(4px);
}

.slideshow-buttons .prev-btn {
  transition: all ease-in-out 0.3s;
  text-shadow: 1px 1px 2px black;
}

.slideshow-buttons .prev-btn:hover {
  transform: translateX(-4px);
}

5. Available slideshow options.

$('.slideshow').slideshowPlugin({

  // CSS selectors
  slidesBox: 'slides-box',
  nextBtn: 'next-btn',
  prevBtn: 'prev-btn',

  // transition effect
  effect: null,

  // animation speed
  slideSpeed: 300,
  titleSpeed: 800,

  // set to 'true' to enable autoplay
  autoplay: null,

  // autoplay interval
  delay: 5000,

  // fadeIn speed for caption text
  fadein: null,

  // no delay
  noDelay: 0,

  // 'keep'
  ratio: null,
  
});

---

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