슬라이드 이펙트4

prev next

소스 보기

Javascript

HTML

CSS

const sliderWrap = document.querySelector(".slider__wrap");
		const sliderImg = document.querySelector(".slider__img"); //보여지는 영역
		const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역
		const slider = document.querySelectorAll(".slider"); //개별 이미지
		const sliderBtn = document.querySelector(".slider__btn");	//버튼
		const sliderBtnPrev = document.querySelector(".prev");		//왼쪽버튼
		const sliderBtnNext = document.querySelector(".next");		//오른쪽버튼

		let currentIndex = 0;		//현재 이미지
		let sliderCount = slider.length;	//이미지 갯수
		let sliderWidth = sliderImg.offsetWidth;	//이미지 가로값


		// 이미지 총 길이 넣기
		sliderInner.style.width = (sliderWidth * sliderCount) + "px";

		// 이미지 움직이는 영역
		function gotoSlider(num){
			sliderInner.style.transition = "all 400ms";
			sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
			console.log(-sliderWidth * num)
			currentIndex = num;
			console.log(num)
			console.log(currentIndex)
			
		}

		// 왼쪽버튼 클릭
		sliderBtnPrev.addEventListener ("click", () => {
			let nextIndex = (currentIndex + sliderCount-1) % sliderCount
			gotoSlider(nextIndex);
			console.log(nextIndex)
			// 43210 43210
		})
		// 오른쪽버튼 클릭
		sliderBtnNext.addEventListener ("click", () => {
			let nextIndex = (currentIndex +1) % sliderCount
			gotoSlider(nextIndex);
			console.log(nextIndex)
		});

		console.log((currentIndex + sliderCount-1) % sliderCount)

<section id="sliderType01">
	<div class="slider__wrap">
		<div class="slider__img">
			<div class="slider__inner">
				<div class="slider" role="group" aria-label="1/9">
					<img src="../assets/img/effect_img01.jpg" alt="이미지1" />
				</div>
				<div class="slider" role="group" aria-label="2/9">
					<img src="../assets/img/effect_img04.jpg" alt="이미지2" />
				</div>
				<div class="slider" role="group" aria-label="3/9">
					<img src="../assets/img/effect_img02.jpg" alt="이미지3" />
				</div>
				<div class="slider" role="group" aria-label="4/9">
					<img src="../assets/img/effect_img03.jpg" alt="이미지4" />
				</div>
				<div class="slider" role="group" aria-label="5/9">
					<img src="../assets/img/effect_img07.jpg" alt="이미지5" />
				</div>
				<div class="slider" role="group" aria-label="6/9">
					<img src="../assets/img/effect_img08.jpg" alt="이미지6" />
				</div>
				<div class="slider" role="group" aria-label="7/9">
					<img src="../assets/img/effect_img01.jpg" alt="이미지7" />
				</div>
				<div class="slider" role="group" aria-label="8/9">
					<img src="../assets/img/effect_img10.jpg" alt="이미지8" />
				</div>
				<div class="slider" role="group" aria-label="9/9">
					<img src="../assets/img/effect_img05.jpg" alt="이미지9" />
				</div>
			</div>
		</div>
		<div class="slider__btn">
			<a href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</a>
			<a href="#" class="next" role="button" aria-label="오른쪽 이미지">next</a>
		</div>
	</div>
</section>

/* slider */
.slider__wrap {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slider__img {
	/* 이미지 보이는 영역 */
	position: relative;
	width: 800px;
	height: 450px;
	overflow: hidden;
}

.slider__inner {
	/* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
	display: flex;
	flex-wrap: wrap;
	/* width: 8800px; --> js로 이미지 추가되도 전체넓이 가변되게끔! */
	/* 4000px --> 4800px  : 총이미지가 6개로 변경*/
	height: 450px;
	position: relative;
}

.slider {
	/* 개별적인 이미지 */
	position: relative;
	width: 800px;
	height: 450px;
}

.slider::before {
	position: absolute;
	left: 5px;
	top: 5px;
	background: rgba(0, 0, 0, 0.4);
	color: white;
	padding: 5px 10px;
}

.slider:nth-child(1)::before {
	content: "이미지1";
}

.slider:nth-child(2)::before {
	content: "이미지2";
}

.slider:nth-child(3)::before {
	content: "이미지3";
}

.slider:nth-child(4)::before {
	content: "이미지4";
}

.slider:nth-child(5)::before {
	content: "이미지5";
}

.slider:nth-child(6)::before {
	content: "이미지6";
}
.slider:nth-child(7)::before {
	content: "이미지7";
}
.slider:nth-child(8)::before {
	content: "이미지8";
}
.slider:nth-child(9)::before {
	content: "이미지9";
}

@media (max-width: 800px) {
	.slider__img {
		width: 400px;
		height: 225px;
	}
}

.slider__btn {}
.slider__btn a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background: rgba(0,0,0,0.4);
	border-radius: 10px;
	text-align: center;
	transition: all 0.2s;
	line-height: 48px;
	display: block;
	font-size: 0.9rem;
	color: rgba(255,255,255,1);
	opacity: 0.7;
}
.slider__btn a.prev {
	left: 0;
}
.slider__btn a.next {
	right: 0;
}
.slider__btn a:hover{
	/* text-shadow: -1px 0 #8545f3, 0 1px #9359f7, 1px 0 #8545f3, 0 -1px #413be1; */
	border: 1px solid rgba(187, 127, 255, 0.6);
	box-shadow: inset 0px 0px 5px aquamarine;
	opacity: 1;
	transition: opacity 0.5s ease;
}