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>

Copy after login

　　<script src="path/to/swiper.min.js?1.1.10"></script>

Copy after login

</html>

Copy after login

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>

Copy after login

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

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

Copy after login

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

<script>

Copy after login

　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
　　})

</script>
</body>

Copy after login

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!