Press "Enter" to skip to content

A Small, Lightweight jQuery Plugin for Fullscreen Slideshows | extendo

Extendo is a simple and easy-to-use background slider built primarily with jQuery. To add a new slide, simply insert a new menu item in the Slide Show section.

full screen responsive slider, responsive slider with text, full screen image slider, full width responsive slider html5

How to make use of it:

1. Add any number of images to the container element.

<div id="slideshow">
  <img src="1.jpg" alt="Slideshow 1" class="active">
  <img src="2.jpg" alt="Slideshow 2">
  <img src="3.jpg" alt="Slideshow 3">
  <img src="4.jpg" alt="Slideshow 4">
  <img src="5.jpg" alt="Slideshow 5">
</div>

2. Include the jQuery library and jQuery extendo plugin in your webpage.

<script src="jquery.min.js"></script>
<script src="jquery.extendo.min.js"></script>

3. Call the plugin on the container.

$("#slideshow").extendo({
  order: "list" // or 'random'
});

4. Basic CSS Styles to Make Your Slide Show Responsive.

#slideshow {
  position: relative;
  height: 350px;
  z-index: -1;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
}

#slideshow img.active {
  z-index: 10;
  opacity: 1.0;
}

#slideshow img.last-active { z-index: 9; }

#slideshow img {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {

img.bg {
  left: 50%;
  margin-left: -512px;
}
}

basic responsive fullscreen slideshow, extendo Plugin/Github


See Demo And Download

Official Website(aleksnyder): Click Here

This superior jQuery/javascript plugin is developed by aleksnyder. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.