Cross-platform Responsive Slider Plugin – Nineslider.js

Nineslider.js is a cross-platform, responsive, computerized, and cross-fading slider/carousel/slideshow library that’s appropriate with jQuery, Vanilla JavaScript, React, and Vue.js.

It offers an interesting and interactive method to show photos, videos, and different content material in your weblog, e-commerce web site, or net software.

How you can use it:

1. Obtain and import the Nineslider.js into your mission.

<!-- 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 material to the slider.

<!-- Vanilla JS & jQuery -->
<ul id="demo"> 
  <li>
    <a href="#">
      <img src="1.jpg" />
      <div class="caption">
        This can be a caption.
      </div>
    </a>
  </li>
  <li>
    <img src="2.jpg" />
    <div class="caption">
      That is one other caption with <a href="#">a hyperlink</a>
    </div>
  </li>
  <li>
    <img src="3.jpg" />
  </li>
  <li>
    <img src="4.jpg" />
  </li>
</ul>

<!-- Vue -->
<div id="demo"></div>

// Vue
var information = [
    {
        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="gadgets.size > 0">
            <ul class="nbs-nineslider-ul" @mouseover="mouseOver" @mouseout="mouseOut" v-show="gadgets.size >= 1"> 
                <li v-for="(merchandise, index) in gadgets" class="nbs-nineslider-item" :ref="'nbs-nineslider-index-' + index">
                    <template v-if="merchandise.hyperlink">
                        <a :href="merchandise.hyperlink">
                            <img :src="merchandise.picture" />
                            <div v-html="merchandise.caption" class="caption" v-if="merchandise.caption"></div>
                        </a>
                    </template>
                    <template v-else>
                        <img :src="merchandise.picture" />
                        <div v-html="merchandise.caption" class="caption" v-if="merchandise.caption"></div>                
                    </template>
                </li>
            </ul>
            <div class="nbs-nineslider-nav-left" @click on="navigate(true)" v-show="gadgets.size > 1"></div>
            <div class="nbs-nineslider-nav-right" @click on="navigate(false)" v-show="gadgets.size > 1"></div>  
            <ul class="nbs-nineslider-paging" v-show="gadgets.size > 1">
                <li v-for="(merchandise, index) in gadgets" @click on="navigateTo(index)" :class="{ energetic: index == currentIndex }"></li>
            </ul>
        </template>
        <template v-else>
            <p>There are not any gadgets to indicate</p>
        </template>
    </div>                   
`;

3. Initialize the slider.

// Vanilla JavaScript
window.addEventListener("load", perform(){
  nineslider(doc.getElementById("demo"), {
    // choices right here
  });
});

// jQuery
$(perform(){
  $('#demo').nineslider({
    // choices right here
  });
});

// Vue
nineslider("#demo", {
    // choices right here
    loaded: perform(){
      var self = this;
      eventChannel.$on("myCustomExternalNav", perform (isReverse) {
        self.navigate(isReverse);
      })        
    }
}, information, template);
// Vue.js omponent to manage the slider externally
new Vue({
    el: "#externalControls",
    strategies:{
      left: perform(){
        eventChannel.$emit("myCustomExternalNav", true);
      },
      proper: perform(){
        eventChannel.$emit("myCustomExternalNav", false)
      }
    }
})

4. Apply your personal types to the Nineslider.

.nbs-nineslider-container {
  place:relative;
  max-width:100%;
  text-align: heart;
}

.nbs-nineslider-ul {
  place:relative;
  margin: 0;
  padding: 0;
  list-style-type:none;      
}

.nbs-nineslider-ul > li {
  place: relative;
  z-index: 0;
  prime: 0px;
  left: 0px;
  show: none; /* initialized by way of slider */
  width: 100%;
}

.nbs-nineslider-ul > li .caption {
  place: absolute;
  backside: 0;
  padding: 5px;
  box-sizing: border-box;
  z-index: 3;
  background: rgba(0,0,0,0.5);
  shade: #fff;
  width: 100%;
  text-align: left;
}

.nbs-nineslider-ul > li img {
  max-width: 100%;  
  width: 100%;
  vertical-align: center;
}

/*** Navigation ***/

.nbs-nineslider-nav-left,
.nbs-nineslider-nav-right {
  padding:5px 10px;
  border-radius:15px;
  -moz-border-radius:15px;
  -webkit-border-radius:15px;      
  place: absolute;
  cursor: pointer;
  prime: 50%;
  rework: translateY(-100%);    
  z-index: 4;
  background: rgba(0,0,0,0.5);
  shade: #fff;     
}

.nbs-nineslider-nav-left {
  left: 10px;
}

.nbs-nineslider-nav-left:earlier than {
  content material: "<"
}

.nbs-nineslider-nav-left.disabled {
  opacity: 0.4;
}

.nbs-nineslider-nav-right {
  proper: 5px;    
}

.nbs-nineslider-nav-right:earlier than {
  content material: ">"
}

/*** Paging ***/

.nbs-nineslider-paging {
  place: relative;
  margin: 0 auto;
  padding: 0;
  text-align: heart;
  z-index: 3;
}

.nbs-nineslider-paging li {
  margin: 0 5px;
  show: inline-block;
  width: 10px;
  top: 10px;
  background: #000;
  border: 1px strong #ccc;
  cursor: pointer;
}

.nbs-nineslider-paging li.energetic {
  background: #fff;
}

5. Obtainable choices 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 superior jQuery plugin is developed by 9bitStudios. For extra Superior Usages, please verify the demo web page or go to the official web site.