swiper4的一些使用点

 

 

1.如果想把箭头变成自己的,就直接在里面添加标签i

 <div class="swiper-button-prev" slot="button-prev">
                            <i class="iconfont icon-zuojiantou"></i>
                </div>
                        <div class="swiper-button-next" slot="button-next">
                            <i class="iconfont icon-youjiantou"></i>
                        </div>

然后再把里面的background-image设置为空

,那些直接调节,i在里面是sass嵌套的写法

复制代码
 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
                    background-image:none;
                    height: 32px;
                    margin-top: -14px;
                    left: -24px;
                    i.iconfont.icon-zuojiantou{
                        font-size: 32px;
                    }
                }
复制代码

 

 

2.不想让swiper鼠标滑动,就在在外层设置<swiper class="swiper-no-swiping" >

或者设置

new Swiper('.swiper-container', {
    speed: 0,
    allowTouchMove: false, // 这是用来禁止鼠标/手指拖动的,既然动效都不要了,那拖动可能也不要了
});

 

posted @   漫漫长路</>  阅读(69)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示