Minimal Clean Banner Slideshow Plugin - jQuery jsslider

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.

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.

  • Publication date: 26.07.2018
  • Source