Cross-platform Responsive Slider Plugin - Nineslider.js

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.