Cross-platform Responsive Slider Plugin - Nineslider.js
File Size: | 117 KB |
---|---|
Views Total: | 951 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Nineslider.js is a cross-platform, responsive, automatic, and cross-fading slider/carousel/slideshow library that is compatible with jQuery, Vanilla JavaScript, React, and Vue.js.
It provides an engaging and interactive way to display images, videos, and other content on your blog, e-commerce website, or web application.
How to use it:
1. Download and import the Nineslider.js into your project.
<!-- Vanilla JS --> <script src="/path/to/nineslider.js"></script> <!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.nineslider.js"></script> <!-- Vue 2 --> <script src="/path/to/cdn/vue.min.js"></script> <script src="/path/to/vue.nineslider.js"></script>
2. Add your content to the slider.
<!-- Vanilla JS & jQuery --> <ul id="demo"> <li> <a href="#"> <img src="1.jpg" /> <div class="caption"> This is a caption. </div> </a> </li> <li> <img src="2.jpg" /> <div class="caption"> This is another caption with <a href="#">a link</a> </div> </li> <li> <img src="3.jpg" /> </li> <li> <img src="4.jpg" /> </li> </ul>
<!-- Vue --> <div id="demo"></div>
// Vue var data = [ { image: "1.jpg", link: "#", caption: 'This is a caption' }, { image: "2.jpg", link: "", caption: 'This is another caption with <a href="#">a link</a>' }, { image: "3.jpg", link: "", caption: null }, { image: "4.jpg", link: "", caption: null } ]; var eventChannel = new Vue(); var template = ` <div class="nbs-nineslider-container"> <template v-if="items.length > 0"> <ul class="nbs-nineslider-ul" @mouseover="mouseOver" @mouseout="mouseOut" v-show="items.length >= 1"> <li v-for="(item, index) in items" class="nbs-nineslider-item" :ref="'nbs-nineslider-index-' + index"> <template v-if="item.link"> <a :href="item.link"> <img :src="item.image" /> <div v-html="item.caption" class="caption" v-if="item.caption"></div> </a> </template> <template v-else> <img :src="item.image" /> <div v-html="item.caption" class="caption" v-if="item.caption"></div> </template> </li> </ul> <div class="nbs-nineslider-nav-left" @click="navigate(true)" v-show="items.length > 1"></div> <div class="nbs-nineslider-nav-right" @click="navigate(false)" v-show="items.length > 1"></div> <ul class="nbs-nineslider-paging" v-show="items.length > 1"> <li v-for="(item, index) in items" @click="navigateTo(index)" :class="{ active: index == currentIndex }"></li> </ul> </template> <template v-else> <p>There are no items to show</p> </template> </div> `;
3. Initialize the slider.
// Vanilla JavaScript window.addEventListener("load", function(){ nineslider(document.getElementById("demo"), { // options here }); }); // jQuery $(function(){ $('#demo').nineslider({ // options here }); }); // Vue nineslider("#demo", { // options here loaded: function(){ var self = this; eventChannel.$on("myCustomExternalNav", function (isReverse) { self.navigate(isReverse); }) } }, data, template); // Vue.js omponent to control the slider externally new Vue({ el: "#externalControls", methods:{ left: function(){ eventChannel.$emit("myCustomExternalNav", true); }, right: function(){ eventChannel.$emit("myCustomExternalNav", false) } } })
4. Apply your own styles to the Nineslider.
.nbs-nineslider-container { position:relative; max-width:100%; text-align: center; } .nbs-nineslider-ul { position:relative; margin: 0; padding: 0; list-style-type:none; } .nbs-nineslider-ul > li { position: relative; z-index: 0; top: 0px; left: 0px; display: none; /* initialized via slider */ width: 100%; } .nbs-nineslider-ul > li .caption { position: absolute; bottom: 0; padding: 5px; box-sizing: border-box; z-index: 3; background: rgba(0,0,0,0.5); color: #fff; width: 100%; text-align: left; } .nbs-nineslider-ul > li img { max-width: 100%; width: 100%; vertical-align: middle; } /*** Navigation ***/ .nbs-nineslider-nav-left, .nbs-nineslider-nav-right { padding:5px 10px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; position: absolute; cursor: pointer; top: 50%; transform: translateY(-100%); z-index: 4; background: rgba(0,0,0,0.5); color: #fff; } .nbs-nineslider-nav-left { left: 10px; } .nbs-nineslider-nav-left:before { content: "<" } .nbs-nineslider-nav-left.disabled { opacity: 0.4; } .nbs-nineslider-nav-right { right: 5px; } .nbs-nineslider-nav-right:before { content: ">" } /*** Paging ***/ .nbs-nineslider-paging { position: relative; margin: 0 auto; padding: 0; text-align: center; z-index: 3; } .nbs-nineslider-paging li { margin: 0 5px; display: inline-block; width: 10px; height: 10px; background: #000; border: 1px solid #ccc; cursor: pointer; } .nbs-nineslider-paging li.active { background: #fff; }
5. Available options and callbacks.
<!-- Vanilla JS --> <script src="/path/to/nineslider.js"></script> <!-- jQuery --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.nineslider.js"></script> <!-- Vue 2 --> <script src="/path/to/cdn/vue.min.js"></script> <script src="/path/to/vue.nineslider.js"></script>
This awesome jQuery plugin is developed by 9bitStudios. For more Advanced Usages, please check the demo page or visit the official website.