JavaScript的基本滑块插件 – OlumSlider
栏目分类:幻灯片 / 轮播图   发布日期:2021-10-21   浏览次数:

OlumSlider 是一个微型滑块 JavaScript 插件,用于在页面上创建响应式、灵活、自动旋转的滑块。

使用:

1. 将幻灯片添加到滑块。

<div id="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  ...
</div>

2. 滑块的基本样式。

slider {
  height: 500px;
}
 
#slider .slide {
  line-height: 500px;
  text-align: center;
  color: white;
  font-size: 30px;
}

3.下载并加载文档中的OlumSlider.js库。

<script src="olum-slider.js"></script>

4. 初始化滑块。

new OlumSlider({
    container: document.getElementById("slider"),
});

5. 确定是否显示分页点和导航箭头。

new OlumSlider({
    container: document.getElementById("slider"),
    arrows: true,
    dots: true,
});

6. 判断是否开启自动播放。

new OlumSlider({
    container: document.getElementById("slider"),
    auto: true,
    interval: 3000, // in ms
});

7. 自定义导航箭头。

new OlumSlider({
    container: document.getElementById("slider"),
    nextArrowIcon: "", // html & text
    prevArrowIcon: "", // html & text
});

官方网站:https://github.com/olumjs/olum-slider

相关热词: OlumSlider滑块

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