轮播图见解 —— 可变宽度、垂直模式、懒加载

丶凡人

已于 2024-06-06 17:15:43 修改

阅读量552

点赞数 1

分类专栏：轮播图文章标签： vue.js 前端

于 2022-07-28 17:49:49 首次发布

本文链接：https://blog.csdn.net/Devil678/article/details/126039994

版权

轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介：
vue-slick-carousel是一个支持SSR的Vue光滑轮播组件，继承了备受推崇的Slick Carousel的功能。

vue-slick-carousel支持多种模式：简单模式、居中模式、多项显示模式、多行显示模式、可变宽度、垂直模式、懒加载、同步播放等。
在这里插入图片描述
安装依赖：
Npm

npm i vue-slick-carousel

引入组件:

import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {
    name: 'MyComponent',
    components: { VueSlickCarousel },
  }

组件使用：

 <VueSlickCarousel v-bind="settings">
      <div v-for="(item,index) in dataList" :key="item.index" class="videoList-video">
          <img :src="item.imgUrl" alt="" />
      </div>
    </VueSlickCarousel>

script代码：

data(){
    return{
      dataList:[
      {
        imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661593155&t=14389dece6f3b75d379a51f5c8279553'
      },
      {
        imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661593155&t=14389dece6f3b75d379a51f5c8279553'
      },
      {
        imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661593155&t=14389dece6f3b75d379a51f5c8279553'
      },
      {
        imgUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661593155&t=14389dece6f3b75d379a51f5c8279553'
      },
     ],
      upAndNext:false,
      settings:{
        //  dots: true,
        infinite: true,   //循环播放
        initialSlide: 1,  // 第几个图片
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,   // 几行图片
        swipeToSlide: true
      }
    }
  },

css:样式

/deep/.slick-prev {
  width:36px;
  height: 36px;
  position: absolute;
  left: -50px;
  background-image: url('../../../assets/images/logo-left01@2x.png') ;
  background-size: 36px 36px;
}
// 左侧按钮
/deep/.slick-prev:before{
  opacity: 0;
}
// 右侧按钮
/deep/.slick-next:before{
  opacity: 0;
}
/deep/.slick-next{
  width:36px;
  height: 36px;
  right: -40px;
  background-image: url('../../../assets/images/logo-right01@2x.png');
   background-size: 36px 36px;
}

官方网址：
轮播图地址详情

H5、微信小程序和APP

			//未选中的指示点样式，支持h5、app
			& /deep/ .uni-swiper-dot{
				width: 6rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 50%;
			}
			//选中的指示点样式，支持h5、app
			& /deep/ .uni-swiper-dot-active{
				width: 18rpx;
				height: 6rpx;
				background: #24EA8C;
				border-radius: 0;
			}
			//未选中的指示点样式，支持微信小程序
			 & /deep/ .wx-swiper-dot {
				 width: 6rpx;
				 height: 6rpx;
				 background: #FFFFFF;
				 border-radius: 50%;
			}
			//选中的指示点样式，支持微信小程序
			 & /deep/ .wx-swiper-dot-active {
				width: 18rpx;
				height: 6rpx;
				background: #24EA8C;
				border-radius: 0;
			}
			//指示点位置，支持h5、app
			& /deep/ .uni-swiper-dots-horizontal{
				bottom: 200rpx;
				left: 100rpx;
			}
			//指示点位置，支持微信小程序
			& /deep/ .wx-swiper-dots-horizontal{
				bottom: 200rpx;
				left: 100rpx;
			}