图片利用swiper插件实现轮播效果

我就是我 2021-11-22 07:26 591阅读 0赞

一般当要使图片自适应屏幕大小变换时候，我们都要给每一个图片设置100%宽高。在图片的父级的div里写上固定的宽高，防止溢出。

那么轮播是写在哪一部分呢？答案就是在父级div里依次引入swiper-container，swiper-wrapper，swiper-slide，这样才不会把盒子挤偏位置。

<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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

如需用到左右按钮，记得给一开始说明的图片的父级class写上position:relative;按钮才会居中在左右侧

发表评论取消回复

表情：

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

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

相关阅读

相关 nuxt3：swiper实现轮播效果

一、背景 nuxt3项目使用swiper实现轮播图效果。二、官网文档 2.1、Swiper CDN [Swiper CDN - Swiper中文网][Swiper C

柔光的暖阳◎/ 2024年03月27日 14:56/ 0 赞/ 199 阅读

相关 swiper实现常规轮播效果

/html代码/ <div class="swiper-container"> <ul class="swiper-wrapper">

痛定思痛。/ 2023年07月12日 03:33/ 0 赞/ 93 阅读

相关利用jQuery实现图片无限循环轮播(不借助于轮播插件)

原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能，而这次是用jQuery来实现图片无限循环轮播！用到的技术有：html、css、JavaScript

阳光穿透心脏的1/2处/ 2023年06月02日 14:00/ 0 赞/ 109 阅读

相关使用swiper4轮播插件

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

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

相关 swiper.js插件实现图片滚动效果

swiper.js插件实现图片滚动效果 1、页面初始化效果： ![Center][] 2、Html如下 <!DOCTYPE html> <ht

偏执的太偏执、/ 2022年06月05日 04:54/ 0 赞/ 502 阅读

相关 Swiper实现图片轮播

关于Swiper（[https://www.swiper.com.cn/][https_www.swiper.com.cn]） Swiper 是一款免费以及轻量级的移动设

布满荆棘的人生/ 2022年04月10日 14:18/ 0 赞/ 450 阅读

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

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

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

相关图片利用swiper插件实现轮播效果

一般当要使图片自适应屏幕大小变换时候，我们都要给每一个图片设置100%宽高。在图片的父级的div里写上固定的宽高，防止溢出。那么轮播是写在哪一部分呢？答案就是在父级div里

我就是我/ 2021年11月22日 07:26/ 0 赞/ 592 阅读

相关利用js实现图片的轮播效果

每个三秒钟做一件事: window.setInterval()：按照指定周期（以毫秒计）来调用函数或计算表达式 setInterval("alert('123')",20...

红太狼/ 2020年06月06日 17:01/ 0 赞/ 852 阅读

相关利用js实现图片的轮播效果

利用js实现图片的轮播效果

朱雀/ 2020年05月10日 16:46/ 0 赞/ 1178 阅读