Banner Slideshow jsslider - Download Minimal Clean Banner Slideshow Plugin - jQuery jsslider

Download Minimal Clean Banner Slideshow Plugin – jQuery jsslider

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal Clean Banner Slideshow Plugin – jQuery jsslider, hope it will help you in programming stack.

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

Demo Download

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.

view source
01 <div id="banner_wrap">
02   <div class="banner_content">
03     <a id="banner0" class="banner"></a>
04     <a id="banner1" class="banner" href="javascript:;"></a>
05     <a id="banner2" class="banner" href="javascript:;"></a>
06     <a id="banner3" class="banner" href="javascript:;"></a>
07     <a id="banner4" class="banner" href="javascript:;"></a>
08     ...
09   </div>
10   <div class="banner_nav">
11     <ul class="nav">
12       <li class="navLi"></li>
13       <li class="navLi"></li>
14       <li class="navLi"></li>
15       <li class="navLi"></li>
16       <li class="navLi"></li>
17       ...
18     </ul>
19   </div>
20 </div>

2. The necessary CSS styles for the banner slideshow.

view source
01 #banner_wrap {
02   width: 498px; /* carousel width */
03   height: 220px; /* carousel heigh */
04   margin: 0;
05   padding: 0;
06   position: relative
07 }
08  
09 .banner_content {
10   width: 100%;
11   height: 100%;
12   position: relative
13 }
14  
15 .banner {
16   width: 100%;
17   height: 100%;
18   display: block;
19   position: absolute;
20   left: 0;
21   top: 0;
22   background: no-repeat center center
23 }

3. Customize the styles of the pagination bullets.

view source
01 .banner_nav {
02   position: absolute;
03   right: 18px;
04   bottom: 18px
05 }
06  
07 .banner_nav ul li {
08   float: left;
09   display: inline-block;
10   width: 15px;
11   height: 15px;
12   margin: 0 8px 0 0;
13   cursor: pointer;
14   border-radius: 7px;
15   background: rgba(224,224,224,0.8);
16 }
17  
18 .banner_nav ul li.curr { background: rgba(255,255,255,1); }

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

view source
01 #banner0 { background-image: url(1.png) }
02  
03 #banner1 { background-image: url(2.png) }
04  
05 #banner2 { background-image: url(3.png) }
06  
07 #banner3 { background-image: url(4.png) }
08  
09 #banner4 { background-image: url(5.png) }
10  
11 ...

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

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.min.js"
2         integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
3         crossorigin="anonymous"></script>
4 <script src="jsslider.js"></script>

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

view source
1 $('#banner_wrap').slider({
2   'banItemClass': 'banner',
3   'navItemClass': 'navLi',
4   'navWrapClass': 'banner_nav',
5   'perpage': 5
6 })

7. All default plugin options.

view source
01 $('#banner_wrap' source : jquery.net

Related posts: