Nineslider.js是一个跨平台、响应迅速、自动和交叉衰落的滑块/转盘/幻灯片库，与jQuery、Vanilla JavaScript、React和Vue.js兼容。

它提供了一种引人入胜的互动方式，可以在博客、电子商务网站或网络应用程序上显示图像、视频和其他内容。

如何使用它:

1.下载Nineslider.js并将其导入到您的项目中。

<!-- 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.将您的内容添加到滑块中。

<!-- 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.初始化滑块。

// 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.把你自己的风格运用到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.可用选项和回调。

<!-- 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>

预览截图

跨平台响应滑块插件 Nineslider.js