滑块响应

Question

在我插入的项目中，我正在制作一个团队页面，该页面将通过一个滑块表示。

最初的想法是尝试重现slick库的功能，其目标是不必导入slick，jQuery并开发我的JavaScript技能。 / p>

当我第一次进入该站点时，滑块已根据需要设置，问题是当我调整页面大小或更改手机/平板电脑的方向时，滑块不遵守脚本定义的行为，因此我无法完全理解原因。

codepen

有什么建议吗？

const giveSizeToElementSlider = (members, width) => {
	[].forEach.call(members, member => { member.style.width = `${width}px`; })
}


const pageTeam = async (notResize = true) => {
	window.addEventListener('resize', () => pageTeam(false), false);  // check when the window is resized

	let teamContentWidth = document.querySelector('.team').offsetWidth;
	let slider = document.querySelector('.team__slider');
	let members = document.querySelectorAll('.team__member');

	await giveSizeToElementSlider(members, teamContentWidth);

	let membersLength = members.length;
	let memberSize = teamContentWidth;
	let numberOfClones = (notResize) ? 2 : 0;


	slider.style.width = `${memberSize * (membersLength + numberOfClones)}px`;
	slider.style.left = `-${memberSize}px`;

	let firstMember = members[0];
	let lastMember = members[membersLength - 1];

	if (notResize) {
		let cloneFirst = firstMember.cloneNode(true);
		let cloneLast = lastMember.cloneNode(true);

		slider.appendChild(cloneFirst);
		slider.insertBefore(cloneLast, firstMember);
	}


	let positionXOne = 0;
	let positionXTwo = 0;
	let posInitial;
	let posFinal;
	let index = 0;
	let allowShift = true;
	let threshold = 100;

	const dragStart = (event) => {
		event = event || window.event;
		event.preventDefault();

		posInitial = slider.offsetLeft;

		if (event.type == 'touchstart') {
			positionXOne = event.touches[0].clientX;
			return;
		}

		positionXOne = event.clientX;
		document.addEventListener('mouseup', dragEnd);
		document.onmousemove = dragAction;
	}

	const dragAction = (event) => {
		event = event || window.event;

		let clientX = (event.type == 'touchmove') ? event.touches[0].clientX : event.clientX;

		positionXTwo = positionXOne - clientX;
		positionXOne = clientX;

		slider.style.left = `${slider.offsetLeft - positionXTwo}px`;
	}

	const dragEnd = (event) => {
		posFinal = slider.offsetLeft;
		if (posFinal - posInitial < -threshold) {
			shiftSlide(1, 'drag');
		} else if (posFinal - posInitial > threshold) {
		  	shiftSlide(-1, 'drag');
		} else {
		  	slider.style.left = `${posInitial}px`;;
		}

		document.onmouseup = null;
		document.onmousemove = null;
	}

	const shiftSlide = (dir, action) => {
		slider.classList.add('shifting');
		if (allowShift) {
			if (!action) { posInitial = slider.offsetLeft; }
			let left = posInitial - memberSize;

			if (dir == 1) {
				index++;
			} else if (dir == -1) {
				left = posInitial + memberSize;
				index--;
			}

			slider.style.left = `${left}px`;
		};

		allowShift = false;
	}

	const checkIndex = () => {
		slider.classList.remove('shifting');

		if (index == -1) {
			slider.style.left = `${-(membersLength * memberSize)}px`;
			index = membersLength - 1;
		}

		if (index == membersLength) {
			slider.style.left = `${-(1 * memberSize)}px`;
		  	index = 0;
		}

		allowShift = true;
	}

	slider.addEventListener('mousedown', dragStart);

	// Touch events
	slider.addEventListener('touchstart', dragStart);
	slider.addEventListener('touchend', dragEnd);
	slider.addEventListener('touchmove', dragAction);

	// Transition events
	slider.addEventListener('transitionend', checkIndex);
}


pageTeam();

.team {
	position: relative;
    width: 600px;
    margin: 100px auto 0;
    overflow: hidden;
    z-index: 1;
}

.team__slider {
  display: flex;
	position: relative;
	top: 0;
	overflow: hidden;
}

.team__slider.shifting {
	transition: left .2s ease-out;
}

.team__member {
    position: relative;
    height: 270px;
    cursor: ew-resize;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

.member__image {
  display: block;
	margin-left: auto;
}

.member__info {
    position: absolute;
    top: 50.5%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.member__job {
	font-size: 1.6em;
	line-height: 1.2em;
	font-weight: 400;
}

.member__name {
	font-size: 3.5em;
	line-height: 1em;
}
.team__icon {
	position: relative;
	text-align: center;
	margin-top: 40px;
}

.team__icon--bar {
	width: 78px;
	margin: 0 auto;
}

.team__icon--hand {
	left: 48%;
	width: 13px;
	animation: drag 3000ms cubic-bezier(.57,-.04,.58,1) infinite both;
	-webkit-animation: drag 3000ms cubic-bezier(.57,-.04,.58,1) infinite both;
}

@keyframes drag {
	0% {
		transform: translateX(-15px);
		-webkit-transform: translateX(-15px);
		-moz-transform: translateX(-15px);
		-ms-transform: translateX(-15px);
		-o-transform: translateX(-15px);
	}
	25% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}
	50% {
		transform: translateX(15px);
		-webkit-transform: translateX(15px);
		-moz-transform: translateX(15px);
		-ms-transform: translateX(15px);
		-o-transform: translateX(15px);
	}
	75% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}
	100% {
		transform: translateX(-15px);
		-webkit-transform: translateX(-15px);
		-moz-transform: translateX(-15px);
		-ms-transform: translateX(-15px);
		-o-transform: translateX(-15px);
	}
}

<div class="team">
	<div class="team__slider">
		<div class="team__member">
			<img src="https://saopera.sa.gov.au/wp-content/uploads/2017/11/person-placeholder.jpg" alt="" class="member__image">
			<div class="member__info">
				<div class="member__job">JOB</div>
				<div class="member__name">NAME</div>
			</div>
		</div>
		<div class="team__member">
			<img src="https://saopera.sa.gov.au/wp-content/uploads/2017/11/person-placeholder.jpg" class="member__image">
			<div class="member__info">
				<div class="member__job">JOB2</div>
				<div class="member__name">NAME2</div>
			</div>
		</div>
		<div class="team__member">
			<img src="https://saopera.sa.gov.au/wp-content/uploads/2017/11/person-placeholder.jpg" alt="" class="member__image">
			<div class="member__info">
				<div class="member__job">JOB3</div>
				<div class="member__name">NAME3</div>
			</div>
		</div>
  </div>
</div>

Answer 1

您可以在调整大小事件时使用窗口，以再次设置滑块库

window.onresize = function(event) {


};