Swiper插件超简单实现轮播图

Love The Way You Lie 2022-02-14 06:07 400阅读 0赞

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用  
***话不多说，直接上教程***  
1、首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载[Swiper文件][Swiper]或使用[CDN][]。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

请勿直接引入Swiper中文网的文件

x <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>
    
    x <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" />

2、CSS样式

<style>
            .swiper-container {
            //你可以在这里设置宽高
                width: 50%;
                height: 50%;
            }
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                /* Center slide text vertically */
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
            img{
                width:250px;
            }
        </style>

3、HTML

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
            <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
            //添加图片
        </div>
        
        <div class="swiper-pagination"></div>
        
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

4、javaScript

<script>
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjY1NQ_size_16_color_FFFFFF_t_70]  
你只需要替换一下图片，和修改一下图片及轮播图的大小就可以轻轻松松写出一个很棒的轮播图，怎么样是不是很简单

[Swiper]: https://www.swiper.com.cn/download/index.html#file1
[CDN]: https://www.swiper.com.cn/cdn/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjY1NQ_size_16_color_FFFFFF_t_70]: /images/20220214/1483a5cc223940078f92b1d044b2c78f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

相关简单使用swiper实现轮播图

1、引入CSS CDN（在页面head） <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.

梦里梦外;/ 2023年06月25日 03:29/ 0 赞/ 30 阅读

相关基于Swiper插件的简单轮播图的实现

一个简单的轮播图的实现，帮助理解Wsiper插件首先，下载插件：https://www.swiper.com.cn/download/index.html\file1 这

待我称王封你为后i/ 2023年06月03日 11:52/ 0 赞/ 17 阅读

相关 Vue中使用swiper插件实现轮播图

最终效果如图: ![20210623143509101.gif][] 为了更稳定不建议使用最新版本swiper 下载指定版本如下图: 用到vue-aweso

爱被打了一巴掌/ 2022年10月09日 02:56/ 0 赞/ 272 阅读

相关 html实现手机端轮播图,swiper移动端轮播图简单实现

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

你的名字/ 2022年10月07日 12:46/ 0 赞/ 302 阅读

相关 swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说，直接上教程

缺乏、安全感/ 2022年10月07日 04:44/ 0 赞/ 264 阅读

相关 swiper轮播图

> swiper中只能放swiper-item > `block` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 <swiper

妖狐艹你老母/ 2022年09月05日 02:00/ 0 赞/ 258 阅读

相关使用swiper4轮播插件

[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_download_index.h

蔚落/ 2022年09月02日 05:15/ 0 赞/ 262 阅读

相关 Swiper插件超简单实现轮播图

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用话不多说，直接上教程

Love The Way You Lie/ 2022年02月14日 06:07/ 0 赞/ 401 阅读

相关 angular7中使用swiper轮播图插件

swiper中文官网 https://www.swiper.com.cn/ 安装插件 npm / cpm npm install swiper --s

悠悠/ 2021年10月18日 21:56/ 0 赞/ 552 阅读

相关 vue 轮播图插件vue-awesome-swiper

在做vue项目时，咱们会经常遇到轮播图效果，那么这给大家介绍一个好用的轮播图插件vue-awesome-swiper，首先在github中搜索vue-awesome-swipe

女爷i/ 2021年09月18日 14:58/ 0 赞/ 1106 阅读