javascript 的通用轮播组件 - NSlider
栏目分类:幻灯片 / 轮播图   发布日期:2021-08-13   浏览次数:

NSlider 是一个轻量级的、可定制的、可通过键盘访问的轮播插件,用 vanilla JavaScript 编写。 

使用:

1、在文档中插入NSlider的JavaScript和CSS。 

<link rel="stylesheet" href="css/nslider.css" />

<script src="js/nslider.js"></script>

2. 向轮播幻灯片添加任何内容,如下所示: 

<div class="container">

  <div class="nslider">

    <div class="nslider-wrapper">

      <div class="nslider-slide" id="slide-1">

        幻灯片 1 内容

      </div>

      <div class="nslider-slide" id="slide-2">

        幻灯片 2 内容

      </div>

      <div class="nslider-slide" id="slide-3">

        幻灯片 3 内容

      </div>

      <!-- 更多幻灯片 -->

    </div>

    <!-- 轮播控件 -->

    <div class="nslider-button nslider-button-prev"></div>

    <div class="nslider-button nslider-button-next"></div>

  </div>

</div>

3.初始化NSlider插件,指定父容器的选择器。

const slider = new NSlider({ 

      elem: document.querySelector('.container'), 

});

4. 启用轮播每 x 秒自动移动到下一张幻灯片。

setInterval(() => slider.next(), 5000);

// 或

setInterval(() => slider.prev(), 5000);

5. 配置过渡效果。 

const slider = new NSlider({

      elem: document.querySelector('.container'),

      animation: {

        duration: 1000, // 毫秒

        timingFunction: 'ease-in'

      },

});

6. 确定是否显示分页项目符号。

const slider = new NSlider({ 

      elem: document.querySelector('.container'), 

      dots: true, 

});

7. 确定是否启用键盘交互。 

const slider = new NSlider({ 

      elem: document.querySelector('.container'), 

      keyboardControl: true, 

});

8. 自定义导航箭头。 

const slider = new NSlider({ 

      elem: document.querySelector('.container'), 

      prevButtonInner: '<', 

      nextButtonInner: '>', 

});

9. 在 init 上设置初始幻灯片。

const slider = new NSlider({ 

      elem: document.querySelector('.container'), 

      currentSlide: 2 // 幻灯片 3 

});

变更日志:

08/11/2021 v1.0.0

官方网站:https://github.com/fatihege/nslider

相关热词: 轮播组件NSlider.js

上一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库