How to use Swiper to implement page image carousel-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use Swiper to implement page image carousel

亚连

Jun 14, 2018 pm 05:04 PM

swiperImage CarouselMobile terminal

This article mainly introduces in detail the effect of image carousel on mobile pages based on Swiper. It has certain reference value. Interested friends can refer to

Using Swiper to develop mobile pages. , easily implement image carousel.

swiper

1. Mainly includes modules:

swiper: refers to sliding , switching (the entire sliding object, sometimes specifically refers to the process (transition) in which the slider still moves forward until it fits the edge after being released)
container: refers to the container (swiper's container includes a collection of slides (wrapper) ), pagination, forward button, etc.)
wrapper: refers to the collection of (touched objects, touchable areas, and moving blocks, which will cause displacement with the slide switching during transition)
slider: refers to Slider (one of the switched blocks, can contain text, pictures, html elements or another swiper
pagination: refers to the paginator (indicates the number of slides and the currently active slide)
active: refers to the active one, Activated (visible slide is active. When there is more than one visible slide, the leftmost one is active by default)
callback: refers to the callback function (triggered under certain circumstances)

2. Simple carousel, as shown below:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > 
 <script type="text/javascript" src="jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="swiper-3.2.7.min.js"></script> 
</head> 
<body> 
<p class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式--> 
 <p class="swiper-wrapper"> 
 <p class="swiper-slide"><img  src="/static/imghwm/default1.png"  data-src="Walks-poster.png"  class="lazy"   alt="How to use Swiper to implement page image carousel" ></p> 
 <p class="swiper-slide"><img  src="/static/imghwm/default1.png"  data-src="Walks-poster.png"  class="lazy"   alt="How to use Swiper to implement page image carousel" ></p> 
 <p class="swiper-slide"><img  src="/static/imghwm/default1.png"  data-src="Walks-poster.png"  class="lazy"   alt="How to use Swiper to implement page image carousel" ></p> 
 </p> 
 <p class="swiper-pagination" style="width: 100px;float: right"></p><!--分页器-->、 
 <p class="swiper-button-prev"></p><!--前进按钮--> 
 <p class="swiper-button-next"></p><!--后退按钮--> 
</p> 
 
<script type="text/javascript"> 
 var mySwiper = new Swiper(".swiper-container",{ 
 direction:"horizontal",/*横向滑动*/ 
 loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/ 
 pagination:".swiper-pagination",/*分页器*/ 
 prevButton:".swiper-button-prev",/*前进按钮*/ 
 nextButton:".swiper-button-next",/*后退按钮*/ 
 autoplay:3000/*每隔3秒自动播放*/ 
 }) 
</script> 
</body> 
</html>

3. Other parameters in .js:

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*轮播的效果：（1）fade:淡入淡出；（2）cube:立方体；（3）coverflow:立体照片*/ 
 slidesPerView:3,/*网格分布：1为在容器区域出现一张图；2：在容器区域出现两张图；3：在容器区域出现三张图*/ 
 centeredSlides:true,/*默认第一块居左，设置为true后则是居中显示*/ 
 coverflow:{ 
  rotate:30,/*3d旋转角度设置为30度*/ 
  stretch:10,/*每个slide之间的拉伸值，值越大靠得越近*/ 
  depth:60,/*位置深度，值越大离Z轴越远，看起来越小*/ 
  modifier:2, 
  slideshadows:true/*开启阴影*/ 
 } 
 })

Note: Before using swiper, swiper must be introduced. css, swiper.js and jQuery

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

In Vue How to implement event-responsive progress bar component

How to use Dom elements in jQuery?

JavaScript Mediator Mode (detailed tutorial)

The above is the detailed content of How to use Swiper to implement page image carousel. 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

vue3中使用swiper遇到的问题怎么解决May 11, 2023 pm 01:07 PM

一、安装swiper使用npminstallswiper安装swpier插件npminstallswiper-s//@9.2.0//或者安装指定版本npminstallswiper@8.4.7-s二、使用swiper直接按照官网的引用方法，项目会报错解决方法：引入的组件使用以下路径import{Swiper,SwiperSlide}from"swiper/vue/swiper-vue";import"swiper/swiper.min.css";有时还需要

解决Vue移动端多触点问题Jun 30, 2023 pm 01:06 PM

在移动端开发中，我们经常会遇到多手指触控的问题。当用户在移动设备上使用多个手指滑动或缩放屏幕时，如何准确地识别和响应这些手势是一个重要的开发难题。在Vue开发中，我们可以采取一些措施来解决移动端多手指触控问题。一、使用vue-touch插件vue-touch是一个用于Vue的手势插件，它可以方便地处理移动端的多手指触控事件。我们可以通过npm安装vue-to

如何在Vue3中使用Swiper？May 09, 2023 pm 04:01 PM

介绍在vue3中使用swiper,实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：使用方式使用命令npminstallswiper安装swiper插件；在main.js里使用样式文件，如下所示：importAppfrom'./App.vue'importrouterfrom'./router'importVueAwesomeSwiperfrom&

Vue开发中如何解决移动端双击放大问题Jun 29, 2023 am 11:06 AM

随着移动端设备的普及，使用Vue进行移动端开发已经成为了常见的选择。然而，我们在移动端开发过程中经常会面临一个问题，就是双击放大。本文将针对这一问题，探讨在Vue开发中如何解决移动端双击放大的具体方法。移动端双击放大问题的出现，主要是因为移动设备在触摸屏上进行双击操作时，会自动放大网页的缩放比例。对于一般的网页开发来说，这种双击放大通常是有好处的，因为它可以

使用Python和百度地图API实现移动端地图定位功能的方法Jul 29, 2023 pm 11:33 PM

使用Python和百度地图API实现移动端地图定位功能的方法随着移动互联网的发展，地图定位功能在移动端应用中变得越来越常见。Python作为一种流行的编程语言，也可以通过使用百度地图API来实现移动端地图定位功能。下面将介绍使用Python和百度地图API实现地图定位功能的步骤，并提供相应的代码示例。步骤一：申请百度地图API密钥在开始之前，我们首先需要申请

jquery+swiper实现时间轴tab滑动切换显示效果Sep 09, 2022 am 10:12 AM

根据时间轴进行tab页面内容切换？下面本篇文章给大家介绍一下jquery时间轴tab切换效果实现结合swiper实现滑动显示效果的方法，希望对大家有所帮助！

Vue开发：优化移动端手势缩放卡顿问题Jun 30, 2023 pm 04:33 PM

Vue开发中如何解决移动端手势缩放页面卡顿问题近年来，移动端应用的普及使得手势操作成为用户交互的重要方式。在Vue开发中，实现移动端手势缩放功能往往会遇到页面卡顿的问题。本文将探讨如何解决这一问题，并提供一些优化策略。了解手势缩放原理在解决问题之前，我们首先需要了解手势缩放的原理。手势缩放通过监听触摸事件来实现，当用户用两个手指滑动屏幕时，页面会按照手指的滑

如何处理PHP表单中的移动端和响应式设计Aug 10, 2023 am 11:51 AM

如何处理PHP表单中的移动端和响应式设计随着移动设备的普及和使用频率的增加，以及越来越多的用户使用移动设备访问网站，适配移动端成为了一个重要的问题。在处理PHP表单时，我们需要考虑如何实现移动端友好的界面和响应式设计。本文将介绍如何处理PHP表单中的移动端和响应式设计，并提供代码示例。1.使用HTML5的响应式表单HTML5提供了一些新特性，可以方便地实现响

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Two Point Museum: All Exhibits And Where To Find Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software