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>
  <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>
      ...
    </ul>
  </div>
</div>

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jsslider.js"></script>

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

$('#banner_wrap').slider({
  'banItemClass': 'banner',
  'navItemClass': 'navLi',
  'navWrapClass': 'banner_nav',
  'perpage': 5
})

7. All default plugin options.

$('#banner_wrap').slider({

  // CSS selectors
  banItemClass:'banItem',
  navItemClass:'navItem',
  navWrapClass:'navWrap',
  navBgWrapClass:'navBg',
  prevOneBtnClass:'prevOneBtn',
  nextOneBtnClass:'nextOneBtn',
  prevPageBtnClass:'prevPageBtn',
  nextPageBtnClass:'nextPageBtn',

  // the number of slides
  perpage:4,

  // current class
  curClass:'curr',

  // hover or click
  event:'hover',

  // none of fade
  effect:'none',

  // animation speed in ms
  speed:5000
  
})

---

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