Skip to content

HolyZheng/parseToSlide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

parseToSlider

version lis

demo1

一个用来轮播dom结构的原生js插件,不依赖jquery等类库。

Installation

npm install parse-to-slider

Example

<!-- html file -->
<body>
    <section id="carouselMap">
        <div class="one">
            <!-- Anything you want to display~! -->
        </div>
        <div class="two">
            <!-- Anything you want to display~! -->
        </div>
        ...
    </section>
</body>
// js file
import parseToSlider from 'parse-to-slider';
/**
 * @param {要转为轮播图的dom id} id 
 * @param {轮播时间间隔,单位秒} interval 
 * @param {是否需要左右箭头导航} ifArrow 
 * @param {下方导航点的位置 left/center/right} position 
 */
parseToSlider('carouselMap', 3, false, 'center');
/* css file */
#carouselMap {
    width: 400px;
    height: 200px;
    position: absolute; /* this is necessary */
}
.one, .two, .three, .four {
    width: 400px;
    height: 200px; 
}

注意

  1. 需要给外层包裹元素绝对定位。
  2. 轮播的内容由你定义,轮播的其实是包裹元素内的首层块级元素

适用场景

简单的小页面,需要展示轮播结构的时候可以利用该插件快速开发。

兼容性

ie8及ie8以上。(ie8与ie9滑动效果失效)

About

一个用来轮播dom结构的原生js插件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published