效果图：

 完整代码：

<template>
	<div ref="teacher" class="teacher_out">
			<div class="teacher_list_out_out flexBetween">
				<div class="teacher_btn" @click="fnPrev()" v-if="canScroll">
                    // 当currentClickNumber大于1表示右滑过，左滑标志亮起
					<img
						v-if="currentClickNumber > 1"
						class="btn_active_icon"
						src="../../assets/images/pc/teacher/left_active_icon.png"
						alt=""
					/>
                    // 当currentClickNumber小于1表示未右滑过，左滑标志置灰
					<img
						v-else
						class="btn_icon"
						src="../../assets/images/pc/teacher/left_icon.png"
						alt=""
					/>
				</div>
				<div class="teacher_list_out flexBetween">
					<div class="teacher_list_box" :ref="`fixedBox`">
                        // 判断可以滑动，当teacherList的容量大于外层设定宽度，则可以滑动
						<div
							v-if="canScroll"
							class="teacher_list flexCenter"
							:style="
								`width:${signleWidth *
									teacherList.length}px;transform:translate(${scrollResultWidth}px,0);transition:0.7s;`
							"
						>
							<img
								:class="
									teacherIndex == i
										? 'teacher_imgs teacher_active'
										: 'teacher_imgs'
								"
								:src="item.pictureSmall"
								alt=""
								v-for="(item, i) in teacherList"
								:key="i"
								@click="selectTeacherInfo(i, item)"
							/>
						</div>
                        // 判断不可以滑动，内容居中对齐，并且不显示左右按钮
						<div v-else class="teacher_list flexVerticalCenter">
							<img
								:class="
									teacherIndex == i
										? 'teacher_imgs teacher_active'
										: 'teacher_imgs'
								"
								:src="item.pictureSmall"
								alt=""
								v-for="(item, i) in teacherList"
								:key="i"
								@click="selectTeacherInfo(i, item)"
							/>
						</div>
					</div>
				</div>

				<div
					class="teacher_btn"
					@click="fnNext(activeName)"
					v-if="canScroll"
				>
                    // 当noScrollRight为true表示可以右滑，右滑标志亮起
					<img
						v-if="noScrollRight"
						class="btn_active_icon"
						src="../../assets/images/pc/teacher/right_active_icon.png"
						alt=""
					/>
                    // 当noScrollRight为false表示不可以右滑，右滑标志置灰
					<img
						v-else
						class="btn_icon"
						src="../../assets/images/pc/teacher/right_icon.png"
						alt=""
					/>
				</div>
			</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			scrollResultWidth: 0, //transform滚动的距离
			signleWidth: 100, //单个流程的宽度
			activeName: 0,
			currentClickNumber: 1,
			noScrollRight: true,
			canScroll: true,
			teacherList: [],
			teacherIndex: 0
		}
	},
	methods: {
		//初始化判断是否可以向右滚动
		initgoRightArrow() {
			const currentScrollWidth = this.$refs[`fixedBox`].clientWidth
			const canNumber = Math.floor(currentScrollWidth / this.signleWidth) //可以放下的个数
			//如果最后一个流程图标已经展示出来，则停止滚动
			if (
				this.currentClickNumber + canNumber >=
				this.teacherList.length
			) {
				this.noScrollRight = false
				this.canScroll = false
			} else {
				this.noScrollRight = true
				this.canScroll = true
			}
		},
		//点击上一个
		fnPrev() {
			//如果右点击的次数大于1，才可以左滚
			if (this.currentClickNumber > 1) {
				this.currentClickNumber -= 1
				this.noScrollRight = true
				this.fnScrollWidth('reduce')
			} else {
				return false
			}
		},
		//点击下一个
		fnNext() {
			const currentScrollWidth = this.$refs[`fixedBox`].clientWidth
			const canNumber = Math.floor(currentScrollWidth / this.signleWidth) //可以放下的个数
			//如果最后一个流程图标已经展示出来，则停止滚动
			if (
				this.currentClickNumber + canNumber >=
				this.teacherList.length
			) {
				return
			}
			//说明放不下有滚动条
			if (this.teacherList.length > canNumber) {
				this.currentClickNumber += 1
				if (
					this.currentClickNumber + canNumber >=
					this.teacherList.length
				) {
					this.noScrollRight = false
				}
				this.fnScrollWidth('add')
			}
		},
		//translate的宽度
		fnScrollWidth(type) {
			let result = 0
			if (type === 'reduce') {
				result = 110
			} else if (type === 'add') {
				result = -110
			} else {
				result = 0
			}
			this.scrollResultWidth += result
		},
	}
}
</script>

<style lang="scss" scoped>

.flexVerticalCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexCenter {
  display: flex;
  align-items: center;
}
		.teacher_list_out_out {
			width: 1000px;
			height: 90px;
			margin: 30px auto 0;
			.teacher_list_out {
				width: 915px;
				height: 90px;
				position: relative;
				margin: 0 auto;
				padding: 0 24px;
				box-sizing: border-box;
				.teacher_list_box {
					width: 915px;
					flex: 1;
					overflow: hidden;
					.teacher_list {
						width: 100%;
						box-sizing: border-box;
						padding: 20px 0;
						white-space: nowrap;
						.teacher_imgs {
							width: 68px;
							height: 68px;
							margin-right: 30px;
							border-radius: 50%;
							cursor: pointer;
						}
						.teacher_imgs:last-child {
							margin-right: 0;
						}
						.teacher_active {
							width: 90px;
							height: 90px;
						}
					}
				}
			}
			.teacher_btn {
				width: 42px;
				height: 42px;
				.btn_icon {
					width: 42px;
					height: 42px;
				}
				.btn_active_icon {
					width: 42px;
					height: 42px;
					cursor: pointer;
				}
			}
		}
</style>