本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(16)

2021-06(107)

2021-07(10)

2021-08(82)

2021-09(53)

Swiper插件使用方法

发布于2021-12-18 20:12     阅读(1071)     评论(0)     点赞(21)     收藏(3)


Swiper插件的简单使用

  • Swiper插件是用来写轮播图的插件,十分简洁方便。可以直接去Swiper官网下载并点击开始使用Swiper按钮查看使用方法,这里只介绍简单引用的方法。
  • 本文所写内容在官网均有详细介绍。

在这里插入图片描述
在这里插入图片描述

一、下载并引入文件

  • 可以直接登录官网下载,如果安装了Nodejs环境也可以打开编译器终端利用npm i swiper下载
  • 将文件放到你喜欢的路径,并分别引入cssjs文件
<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

    

二、html内容

<div class="swiper-container">
    <div class="swiper-wrapper">
    <!-- 这里插入图片 轮播图1,2,3-->
        <div class="swiper-slide">
			 <img src="" alt="">
		</div>
         <div class="swiper-slide">
			 <img src="" alt="">
		</div>
		  <div class="swiper-slide">
			 <img src="" alt="">
		</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
    <!--导航等组件可以放在container之外 -->

    
  • 可以利用原有类名或者自己添加的class类名来将轮播图修改为自己喜欢的样式
  • 例如修改轮播图大小
.swiper-container {width: 600px;
   height: 300px;
}
    

三、JavaScript内容

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    scrollbar: {el: '.swiper-scrollbar',},
  })        
  </script></body>

    

四、根据自己的需求设置轮播图

在这里插入图片描述

上图是插入图片后的Swiper轮播图,左右两侧为导航按钮,正下方圆点为分页器,右下角为滚动条。

1、设置轮播图自动切换
  • 放在script标签中 表示自动切换 每隔1000ms切换一次

  var mySwiper = new Swiper('.swiper-container', {
		    autoplay: {
          	delay: 1000
       		},
});

    
2、修改前进、后退按钮样式
  • swiper5新增可以通过设置Swiper的风格--swiper-theme-color或单独设置按钮风格--swiper-navigation-color来改变按钮颜色。
  • swiper5新增可以通过设置--swiper-navigation-size来调整按钮大小,默认是44px。
   <!-- 分别为  前进  后退 按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    
	.swiper-button-prev{
		--swiper-theme-color:red;
		--swiper-navigation-size:20px;
	}

    

五、所有样式都可以随意按照需求调整,如果想要对Swiper插件有更多的了解,请登录Swiper官网查看API文档

原文链接:https://blog.csdn.net/ZiChen_Jiang/article/details/121960611




所属网站分类: 技术文章 > 博客

作者:前端黄柠檬

链接:http://www.qianduanheidong.com/blog/article/264775/1fa57da753cc8b4bbd42/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

21 0
收藏该文
已收藏

评论内容:(最多支持255个字符)