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 @ 2022-09-29 14:24  漫漫长路</>  阅读(65)  评论(0编辑  收藏  举报