实现 swiper 的左右箭头放到外面，定制箭头的样式

最新推荐文章于 2024-05-21 09:48:42 发布
最新推荐文章于 2024-05-21 09:48:42 发布
阅读量2.1w 收藏 6
点赞数 2
分类专栏： 坑 文章标签： swiper箭头 里面 外面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/80726205
版权

swiper 很好用，但是设计可不会按照 swiper 的样式给你设计图，一般情况下轮播图会有下面这种情况：

    swiper 本身的箭头在里面；

     而我们需要箭头在外面；


  

    swiper 默认的样式是 箭头部分在内部，那我们要如何实现siwper 的箭头放到外面呢？


第一步：实现一个不带箭头的轮播图；

 代码：

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< link href= "https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.css" rel= "stylesheet" >
< script src = "./swiper.min.js" > < / script >
< style >
.swiper-container {
border : 1 px solid red;
width : 400 px ;
height : 400 px ;
}
.swiper-slide {
width : 400 px ;
height : 400 px ;
background : orange;
}

/* .swiper-father{
width:500px;
height:400px;
border:1px solid red;
position:relative;
} */
< / style >
</ head>
< body>
<!-- 增加一个father的包裹 -->
< div class= "swiper-father" >
< div class= "swiper-container" >
< div class= "swiper-wrapper" >
< div class= "swiper-slide" >slide1 </ div >
< div class= "swiper-slide" >slide2 </ div >
< div class= "swiper-slide" >slide3 </ div >
</ div >
<!-- siwper原本的箭头放在这里 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</ div >
<!-- 我们把swiper 的箭头放到swiper 外面 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</ div >

< script >
var mySwiper =new Swiper ( '.swiper-container' ,{
direction: 'horizontal' ,
loop: false ,
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
});
< / script >
</ body>
</ html>

第二步：在swiper-container 外面增加一个包裹，也就是套一个div，给这个div增加相对定位；

            把箭头的代码添加在swiper-container 外面，也就是把上一步的代码中的注释打开；

 代码：

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< link href= "https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.css" rel= "stylesheet" >
< script src = "./swiper.min.js" > < / script >
< style >
.swiper-container {
border : 1 px solid red;
width : 400 px ;
height : 400 px ;
}
.swiper-slide {
width : 400 px ;
height : 400 px ;
background : orange;
}

.swiper-father {
width : 500 px ;
height : 400 px ;
border : 1 px solid red;
position :relative;
}
< / style >
</ head>
< body>
<!-- 增加一个father的包裹 -->
< div class= "swiper-father" >
< div class= "swiper-container" >
< div class= "swiper-wrapper" >
< div class= "swiper-slide" >slide1 </ div >
< div class= "swiper-slide" >slide2 </ div >
< div class= "swiper-slide" >slide3 </ div >
</ div >
<!-- siwper原本的箭头放在这里 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</ div >
<!-- 我们把swiper 的箭头放到swiper 外面 -->
< div class= "swiper-button-prev"></ div>
< div class= "swiper-button-next"></ div>
</ div >

< script >
var mySwiper =new Swiper ( '.swiper-container' ,{
direction: 'horizontal' ,
loop: false ,
navigation: {
nextEl: '.swiper-button-next' ,
prevEl: '.swiper-button-prev' ,
},
});
< / script >
</ body>
</ html>


上面就可以实现了箭头放到外面的效果；


另外，设计给的箭头的样式和siwper自带的样式是不一样，那么如何处理？

那就换掉好了，找到设置这个箭头的类名，然后强行覆盖掉，使用自己的图片，简单粗暴；


cvper
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
图片左右箭头显示
08-29
总结来说，"图片左右箭头显示"是构建图片轮播的关键部分，它涉及到图片切换的逻辑、动画效果的实现以及用户交互的设计。理解这些概念和技术，将有助于开发者创建出更加生动、友好的图片展示功能。
swiper 外层添加左右箭头
weixin_35704268的博客
07-22 961
很简单： 就是给swiper-container 外层再添加一个父元素添加position：relative 定位 ，把箭头写入父元素内，至于要把箭头左右偏移多少就看你的心情喽！！！ //父容器 <div class="arrowPositon"> //两个箭头 <div class="swiper-button-next "></div> ...
swiper 的左右箭头放到外面
徐同保的专栏
04-17 7156
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...
vue3中如何使用swiper
最新发布
qq_51721168的博客
05-21 1154
在组件中引入 animate.min.js 与 animate.min.css。下载 animate.min.css animate.min.js。到这一步swiper轮播图就已经可以正常使用了。这样就引入完毕了，按照官网中用法（
vue使用swiper实现轮播，左右箭头可在轮播图里面也可以在轮播图外面
friend_ship的博客
03-17 6889
vue封装了一个插件包用来实现轮播效果：vue-awesome-swiper 命令行安装: npm installvue-awesome-swiper --save 在vue中使用swiper可以分为两种： 第一种：全局引入 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swiper'; import "swiper/di...
swiper修改轮播图箭头的大小和颜色
ccyy
05-08 3023
遇到的问题：写响应式页面时需要将swiper的箭头按需要缩小到一定的比例。 解决： 修改箭头的大小： 划重点：一定要在原css中就写上去，不然单独写到媒体查询里没有用。 .swiper-button-prev:after, .swiper-button-next:after { font-size: 25px!important; } 写到原css样式中，再写到媒体查询对应的地方，即可。 修改箭头的颜色： 这个不用写到原生css样式中，直接在style中写就可以。 .swip
swiper两边导航按钮定位被压住的解决办法
行如逆水行舟，不进则退
03-31 928
swiper两边导航按钮定位被压住的解决办法问题原因解决注意 问题 如图，swiper两边的导航按钮需要定位到父盒子外面时，被压住 原因 是因为swiper的容器盒子swiper-container里也有相对定位 解决 我们需要把swiper的容器盒子swiper-container改成静态定位 .swiper-container { position: static; } 注意 我们在用swiper-container的时候最好嵌套在你需要swiper的盒子里面，不要直接给这个父盒子添加swip
Swiper轮播图插件之如何修改前进后退按钮swiper-button-prev和swiper-button-next的默认样式
qq_53985958的博客
06-17 5941
第一步： 在轮播图最外层的容器中将原本前进后退按钮的大小设置为0 注意： Swiper6之前的默认容器是’.swiper-container’，Swiper7之后的默认容器是’.swiper’。 .swiper-container{ --swiper-navigation-size:0; } 第二步： 设置想要的按钮图片 <!--如果需要导航按钮--> <div class="swiper-button-prev rot" slot="button-prev"> &lt
Swiper左右滚动文字时间轴代码
06-11
在这个“Swiper左右滚动文字时间轴代码”项目中，Swiper被用来构建了一个企业历程展示的时间轴，用户可以通过点击左右箭头或者在触摸设备上滑动来切换不同的时间点。 1. **Swiper组件**: Swiper的核心功能是提供...
带箭头左右轮播效果网页特效
11-12
JavaScript负责处理用户的交互，例如点击左右箭头时触发轮播的前进或后退，同时处理自动播放和定时器功能。CSS则用于定义轮播图的样式，包括箭头的形状、位置、颜色以及轮播内容的过渡动画效果。 首先，HTML结构应...
利用swiper实现游戏网站幻灯片轮播代码
01-22
7. **自定义样式**：根据设计需求，对Swiper的默认样式进行定制，确保与网站的整体风格一致。 通过以上步骤，我们可以成功地使用Swiper创建一个游戏网站的幻灯片轮播，同时实现了点击标题切换轮播的效果。Swiper的...
swiper滑动-上下左右滑动结合
05-19
4. **易于定制**：通过CSS样式和JavaScript API，开发者可以轻松调整滑动效果，实现个性化的需求。 5. **模块化**：Swiper采用模块化设计，可以根据需要选择加载必要的组件，降低页面加载时间。 在"swiper滑动-上下...
js/swiper 内容块超出时加滑动控制和左右按钮控制滑动；
onlylele的博客
11-04 771
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slidesPerGroup_swiper3参数选项</title> <meta name="keywor...
swiper 自定义左右箭头样式 将箭头移出容器
两只鱼，鱼鱼鱼鱼鱼
07-02 5347
关键点： 1.在".swiper-container"外层套一个父级容器“.swiper-father”，并让其position：relative； 2.重点：箭头相关的两行代码，要从“.swiper-container”移出来，放在“.swiper-father”下 css代码： .swiper-father { position: relative; padding:0 37px...
轮播图左右按钮放到外面的思路
qq_53512708的博客
02-10 1507
本人用的vue-awesome-swiper组件，组件默认的按钮是在里边的，如果改变left或right的值移到外侧会因为overflow:hidden;样式的影响而消失，我的做法是写一个假的按钮在外面，当点击假的按钮时获取轮播图按钮的dom结点进行“click” <div class="preview-product"> <my-swiper class="preview-product-swiper"
vue-awesome-swiper如何自定义左右箭头图片
寻找到底哪里有蓝天
04-08 336
适用于：vue2、vue-awesome-swiper版本3.1.3 如果需要自定义左右箭头 想要实现swiper左右点击的箭头在slide外面，只需要在swiper标签外再套一个div,再给这个div附上相对定位即可 原生的组件是写在swiper里面，需要在swiper外面再包一层div，把箭头写在外面，只需要class相同 修改箭头自带样式，只需要找到swiper自带的类名，再进行...
Vue2+swiper基础实现轮播图
qq_66429904的博客
04-03 2831
Vue2中swiper的基础使用
uniapp中swiper 轮播带左右箭头，点击切换轮播效果demo(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-21 1468
uniapp中swiper 轮播带左右箭头，点击切换轮播效果demo
如何将swiper.js插件中的切换箭头放在外面依然生效
hx19990308的博客
05-06 1220
1.在swiper-container外面放一个盒子 给这个盒子加上相对定位然后就可以将箭头拿出来用了 （注：图片地址是我本地的，为了做效果用）
swiper左右箭头 修改位置
04-14
你好，关于修改Swiper的左右箭头位置，你可以在CSS文件中找到Swiper箭头所属的类，通过修改该类的CSS样式来改变左右箭头的位置。具体的修改方式可能因使用的Swiper版本不同而略有不同，建议查看Swiper官方文档或网上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值