Minimal Clean Banner Slideshow Plugin - jQuery jsslider

File Size: 7.29 KB
Views Total: 2906
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Clean Banner Slideshow Plugin - jQuery jsslider

jsslider is a simple, configurable jQuery carousel plugin for generating a banner slideshow from plain html elements.

By default, the banner slide automatically fades through a set of slides at a given interval. You users are also able to switch between the slides by hover/click/tap the pagination bullets.

How to use it:

1. Build the HTML structure for the banner slideshow.

<div id="banner_wrap">
  <div class="banner_content">
    <a id="banner0" class="banner"></a>
    <a id="banner1" class="banner" href="javascript:;"></a>
    <a id="banner2" class="banner" href="javascript:;"></a>
    <a id="banner3" class="banner" href="javascript:;"></a>
    <a id="banner4" class="banner" href="javascript:;"></a>
  <div class="banner_nav">
    <ul class="nav">
      <li class="navLi"></li>
      <li class="navLi"></li>
      <li class="navLi"></li>
      <li class="navLi"></li>
      <li class="navLi"></li>

2. The necessary CSS styles for the banner slideshow.

#banner_wrap {
  width: 498px; /* carousel width */
  height: 220px; /* carousel heigh */
  margin: 0;
  padding: 0;
  position: relative

.banner_content {
  width: 100%;
  height: 100%;
  position: relative

.banner {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: no-repeat center center

3. Customize the styles of the pagination bullets.

.banner_nav {
  position: absolute;
  right: 18px;
  bottom: 18px

.banner_nav ul li {
  float: left;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 8px 0 0;
  cursor: pointer;
  border-radius: 7px;
  background: rgba(224,224,224,0.8);

.banner_nav ul li.curr { background: rgba(255,255,255,1); }

4. Add your own background images to the carousel slides.

#banner0 { background-image: url(1.png) }

#banner1 { background-image: url(2.png) }

#banner2 { background-image: url(3.png) }

#banner3 { background-image: url(4.png) }

#banner4 { background-image: url(5.png) }


5. Put the jQuery jsslider plugin's JavaScript after loading jQuery.

<script src="" 
<script src="jsslider.js"></script>

6. The JavaScript to render a banner slideshow on the page.

  'banItemClass': 'banner',
  'navItemClass': 'navLi',
  'navWrapClass': 'banner_nav',
  'perpage': 5

7. All default plugin options.


  // CSS selectors

  // the number of slides

  // current class

  // hover or click

  // none of fade

  // animation speed in ms

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