231219 개발일지 TIL - [JS]동영상 유무에 따른 슬라이드 쇼 구현

동영상 유무에 따른 슬라이드 쇼 구현

슬라이드 배너에서 동영상과 이미지를 불러와 동영상이 없을 경우 이미지만 보여주도록 구현했다.

동영상이 있을 경우에만 동영상을 포함시키는 함수

function slideData(videoUrl, offerImages, skuImages) {
	const slideShow = document.getElementById("slideshow");
	const listItems = slideshow.getElementsByTagName('li');

	// videoUrl
	if (videoUrl && videoUrl.trim() !== "") { // videoUrl이 존재하고 비어있지 않은 경우에만 실행
		let videoLi = document.createElement('li');
		let videoEmbed = document.createElement('video');
		videoEmbed.src = videoUrl;
		videoEmbed.controls = true;
		videoLi.appendChild(videoEmbed);

		Object.assign(videoLi.style, {
			display: 'none',
			maxWidth: '400px',
			maxHeight: '400px',
			textAlign: 'center'
		});

		Object.assign(videoEmbed.style, {
			maxWidth: '100%',
			maxHeight: '100%',
			width: '100%',
			height: '100%',
			textAlign: 'center'
		});

		slideShow.appendChild(videoLi);
	}

	// offerImages
	for (let i = 0; i < offerImages.length; i++) {
		let imgLi = document.createElement('li');
		let imgElement = document.createElement('img');
		imgElement.src = offerImages[i].imgUrl;
		imgLi.appendChild(imgElement);
		imgLi.style.display = 'none';
		slideShow.appendChild(imgLi);
	}

	// skuImages
	for (let i = 0; i < skuImages.length; i++) {
		let imgLi = document.createElement('li');
		let imgElement = document.createElement('img');
		imgElement.src = skuImages[i].imgUrl;
		imgLi.appendChild(imgElement);
		imgLi.style.display = 'none';
		slideShow.appendChild(imgLi);
	}

	if(slideShow.children.length > 0) {
		slideShow.children[0].style.display = 'block';
	}
}

videoUrl이 존재하고 비어있지 않은 경우에만 동영상 관련된 코드가 실행된다.

느낀 점
웹 페이지의 유연성과 사용자 경험에 대해 다시 한번 생각하며 작업하게 되었다.