[JavaScript知识库]el-scrollbar 横向滚轮 PC端轮播图加下标索引缩略图

<div class="bannerimg" >
					<el-carousel :interval="5000" arrow="always" indicator-position="none" height="200px" ref="carousel" @change="bannerChange">
						<el-carousel-item v-for="(item,index) in imgList" :key="index" name="index">
							<el-image
								style="width:100%; height: 100%"
								:src="item.url"
								fit="cover"
								:preview-src-list="[item.url]"></el-image>
						</el-carousel-item>
					</el-carousel>				
					<el-scrollbar ref="scroll"  @wheel.native.prevent="changeScroll">
						<div class="thumbnail" ref="imgInde" :style="{'margin-left':left+'px','width':imgList.length*55+ 'px'}" >
							<div ref="scrollItem" v-for="(item,index) in imgList" :key="index" :class="{'active':banInd == index}" @click="setActiveItem(index)">
								<el-image style="width: 100%; height: 100%"
									:src="item.url"	fit="cover"></el-image>
							</div>
						</div>					
					</el-scrollbar>
				</div>

export default {
  data() {
    return {
    banInd:0,
    imgList:[
			{'url':require('@/图片路径')},
			{'url':require('@/图片路径')},
			{'url':require('@/图片路径')},
			{'url':require('@/图片路径')},
			{'url':require('@/图片路径')},
			{'url':require('@/图片路径')}
			],
    }
  },
    methods: {
    
	  bannerChange(Events){
		  this.banInd = Events;		  
		// 调整滚动条位置
		let activeLeft = this.$refs.scrollItem[Events].offsetLeft;
		let boxWidth = this.$refs.scroll.$refs.resize.offsetWidth-50;;
		this.$refs.scroll.$refs.wrap.scrollLeft = activeLeft + 50 / 2 - boxWidth / 2;
	  },
	  setActiveItem(index){
		//   点击缩略图展示相对索引图片
		  this.$refs.carousel.setActiveItem(index)
	  }
    }
}

		.bannerimg{
			overflow: hidden;
			width: 100%;
			margin: auto;
			 ::v-deep .el-scrollbar {
				height: 100%;
			}
			::v-deep .el-scrollbar__wrap {
				overflow: scroll;
				width: 110%;
				height: 120%;
			}
			::v-deep .el-carousel__arrow{
				border-radius: 0 !important;
				width: 16px !important;
			}
			.thumbnail{			
					display: flex;
					margin-top: 10px;
					div{
						width: 50px;
						height: 50px;
						margin-left: 4px;
					}
					div:first-child{
						margin-left:0 ;
					}
					.active{
						border: 2px solid #FF7530;
					}
				}
			}