Home > Article > Web Front-end > Introduction to the swiper plug-in and how to carousel images

Introduction to the swiper plug-in and how to carousel images

PHP中文网Original: 2017-06-19 17:23:161706browse

swiper

Swiper is a sliding special effects plug-in created purely with JavaScript, targeting mobile terminals such as mobile phones and tablets.

Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.

Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites!

1. First create a swiper operating environment. The files required are swiper.min.js and swiper.min.css files.

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

　　3989f20b29ca3784489ad4a92ad594dd2cacc6d41bbb37262a98f745aa00fbf0

73a6ac4ed44ffec12cee46588e518a5e

2. Write HTML content.

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

3. You may want to define a size for Swiper, but of course not.

.swiper-container {
　　width: 600px;
　　height: 300px;
}

4. Initialize Swiper: It is best to next to the 36cc49f0c466276486e50c850b7e4956 tag (function call)

3f1c4e4b6b16bbbd69b2ee476dc4f83a

　var swiper=new Swiper(' .swiper-container',{
　　autoplay:1000,//Automatic rotation
　　AutoplayDisableOnInteraction:false,//Continue scrolling after sliding
　　loop:true,///Loop
　　pagination:'.swiper -pagination',//pagination
　　paginationClickable:true,//small dot click
　　 spaceBetween:30,///picture gap
　　　　direction:"horizontal"//default horizontal vertical vertical
　　})

2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956

The above is the detailed content of Introduction to the swiper plug-in and how to carousel images. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of high-frequency usage of ES6 string extensionsNext article：Summary of high-frequency usage of ES6 string extensions

See more

Introduction to the swiper plug-in and how to carousel images

swiper

Related articles