samsonos/js_slider

维护者

详细信息

github.com/samsonos/js_slider

主页

源代码

问题

安装: 557

依赖项: 0

建议者: 0

安全性: 0

星标: 1

关注者: 3

分支: 3

公开问题: 4

语言：JavaScript

0.0.1 2015-09-23 06:25 UTC

Requires

Open Software License (OSL) v 3.0 afb690e281755479bca90593a8bf8e0a72494e64

This package is not auto-updated.

Last update: 2024-09-14 16:24:04 UTC

README

通用JavaScript轮播图滑块

滑块内容必须位于 < class="sjs-slider"> 元素中，由父元素包装

<div class="sliderContainer">
    <ul class="sjs-slider">
        <li class="sjs-slide">slide1</li>
        <li class="sjs-slide">slide2</li>
        <li class="sjs-slide">slide3</li>
    </ul>
</div>

模块添加

对于模块添加

sliderContainer.slider();

在您的HTML代码中切换元素应设置 arrow-left 类名表示向左切换，arrow-right 类名表示向右切换。

模块选项

该模块有一系列参数，可以在添加时设置

  • leftButton – 明确指示切换到左边
  • rightButton – 明确指示切换到右边
  • autoScroll – 自动滚动
  • num – 显示元素的数量

滑块的宽度和数量

模块根据父 < class="sjs-slider"> 元素的一般宽度和显示元素的数量（参数num）定义滑块的宽度。滑块的宽度将平均分成显示元素的数量。因此，您应精确设置 sliderContainer 块的宽度样式。

示例

如果您想在项目中添加由两个箭头和宽度为252px的4个幻灯片组成的滑块，则

html

<div class="arrow-left"></div>
<div class="sliderContainer">
    <ul class="sjs-slider">
        <li class="sjs-slide">slide1</li>
        <li class="sjs-slide">slide2</li>
        <li class="sjs-slide">slide3</li>
        <li class="sjs-slide">slide4</li>
        <li class="sjs-slide">slide5</li>
    </ul>
</div>
<div class="arrow-left"></div>

css

.sliderContainer {
  text-align: center;
  overflow: hidden;
  width: 1008px;
}
.sliderContainer li {
  overflow: hidden;
}

js

s('.sliderContainer').pageInit(function(sliderContainer){
    sliderContainer.slider({
        num : 4
    });
});