슬라이드 이펙트07

이미지1

이미지2

이미지3

이미지4

이미지5

이미지6

이미지7

이미지8

이미지9

소스 보기

Javascript

HTML

CSS

<section id="sliderType01">
	<div class="slider__wrap">
		<div class="slider__img">
			<div class="slider__inner">
				<div class="slider s1" role="group" aria-label="1/9">
					<span>이미지1</span><img src="../assets/img/effect_img13.jpg" alt="이미지1" />
				</div>
				<div class="slider s2" role="group" aria-label="2/9">
					<span>이미지2</span><img src="../assets/img/effect_img19.jpg" alt="이미지2" />
				</div>
				<div class="slider s3" role="group" aria-label="3/9">
					<span>이미지3</span><img src="../assets/img/effect_img15.jpg" alt="이미지3" />
				</div>
				<div class="slider s4" role="group" aria-label="4/9">
					<span>이미지4</span><img src="../assets/img/effect_img16.jpg" alt="이미지4" />
				</div>
				<div class="slider s5" role="group" aria-label="5/9">
					<span>이미지5</span><img src="../assets/img/effect_img17.jpg" alt="이미지5" />
				</div>
				<div class="slider s6" role="group" aria-label="6/9">
					<span>이미지6</span><img src="../assets/img/effect_img20.jpg" alt="이미지6" />
				</div>
				<div class="slider s7" role="group" aria-label="7/9">
					<span>이미지7</span><img src="../assets/img/effect_img21.jpg" alt="이미지7" />
				</div>
				<div class="slider s8" role="group" aria-label="8/9">
					<span>이미지8</span><img src="../assets/img/effect_img18.jpg" alt="이미지8" />
				</div>
				<div class="slider s9" role="group" aria-label="9/9">
					<span>이미지9</span><img src="../assets/img/effect_img14.jpg" alt="이미지9" />
				</div>
			</div>
		</div>
		<div class="slider__btn">
			<button href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</button>
			<button href="#" class="next" role="button" aria-label="오른쪽 이미지">next</button>
		</div>
		<div class="slider__dot">
			<!-- <a href="#" class="dot active">이미지1</a>
			<a href="#" class="dot">이미지2</a>
			<a href="#" class="dot">이미지3</a>
			<a href="#" class="dot">이미지4</a>
			<a href="#" class="dot">이미지5</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;
		border: 2px dashed #000;
		box-shadow: 0px 0px 100px #ff952ab7;
		border-radius: 10px;
	}

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


	.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 span {
		position: absolute;
		left: 5px;
		top: 5px;
		background: rgba(0, 0, 0, 0.4);
		color: #000;
		opacity: 0.7;
		text-shadow: -1px 0 #FE8D1C, 0 1px #f87d02, 1px 0 #dd7f20, 0 -1px #faa249;
		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 button {
		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;
		pointer-events: auto;
		border: 0;
		cursor: pointer;
	}
	.slider__btn button.disable{
		pointer-events: none;
	}

	.slider__btn button.prev {
		left: 0;
	}

	.slider__btn button.next {
		right: 0;
	}

	.slider__btn button: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;
	}

	.slider__dot {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20px;
		margin: 2px;
	}

	.slider__dot .dot {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: rgba(30, 30, 30, 0.4);
		border-radius: 50%;
		text-indent: -9999px;
		transition: all 0.3s;
		margin: 5px;
	}

	.slider__dot .dot.active {
		/* background: #000; */
		color: rgb(187, 127, 255);
		border-color: rgba(187, 127, 255, 0.6);
		box-shadow: -1px 1px 2px aquamarine;
		background: rgba(0, 0, 0, 0.4);
		/* position: relative; */
		transition: all 2s ease;
	}

	.slider__dot .dot.active {
		/* background: #000; */
		color: rgb(187, 127, 255);
		border-color: rgba(187, 127, 255, 0.6);
		box-shadow: -1px 1px 2px aquamarine;
		position: relative;
	}

	.slider__dot .dot.active::after {
		position: absolute;
		top: 0%;
		left: 00%;
		/* transform: translate(-50%, -50%); */
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0);
		z-index: -1;
		border: 1px solid rgba(187, 127, 255, 0.6);
		box-shadow: -1px 1px 10px aquamarine;
		animation: rotate 3s linear infinite;
		pointer-events: none;

	}

	.slider__dot .dot.active::before {
		position: absolute;
		top: 0%;
		left: 00%;
		/* transform: translate(-50%, -50%); */
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0);
		z-index: -1;
		border: 1px solid rgba(0, 162, 255, 0.534);
		box-shadow: -1px 1px 10px rgba(0, 162, 255, 0.534);
		animation: rotate2 7s linear infinite;
		pointer-events: none;

	}

	.slider__dot .play {
		display: inline-block;
		display: none;
		width: 18px;
		height: 20px;
		margin-left: 5px;			
		vertical-align: -7px;
		border-left: 14px solid #FE8D1C;
		border-bottom: 10px solid transparent;
		border-top: 10px solid transparent;
		border-radius: 2px;
		opacity: 0.7;
		transition: all 0.2s;
	}
	.slider__dot .play:hover {
		opacity: 1;
		filter: brightness(120%);
	}
	
	.slider__dot .stop {
		display: inline-block;
		width: 18px;
		height: 20px;
		position: relative;
		margin-left: 5px;			
		vertical-align: -7px;
		opacity: 0.7;
		transition: all 0.2s;
		
	}
	.slider__dot .stop:hover{
		opacity: 1;
		filter: brightness(120%);
	}
	.slider__dot .stop::before {
		content: '';
		width: 6px;
		height: 18px;
		background: #FE8D1C;
		border-radius: 2px;
		position: absolute;
		left: 0;top: 0;
	}
	.slider__dot .stop::after {
		content: '';
		width: 6px;
		height: 18px;
		border-radius: 2px;
		background: #FE8D1C;
		position: absolute;
		right: 3px; top: 0;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(359deg);
		}
	}

	@keyframes rotate2 {
		0% {
			transform: rotate(359deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	/* 할로윈에디션 ^_^ */
	#header {
		color: black;
	}

	#header h1 {
		font-family: 'Creepster', cursive;
		font-size: 50px;
		border-bottom: 1px dashed #FE8D1C;
		text-shadow: -1px 0 2px #FE8D1C, 0 1px 2px #f87d02, 1px 0 3px #dd7f20, 0 -1px 4px #faa249;
	}

	#header p {
		color: #ff962ce7;
	}
	#header li a {
		border: 1px solid #633303;
		font-family: 'Creepster', cursive;
		opacity: 0.7;
	}

	#header li.active a {
		background: #000;
		color: #FE8D1C;
		border-color: #faa249;
		box-shadow: -1px 1px 1px #F3F3F4;
		opacity: 1;
	}
	.slider__btn button {
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		transition: all 0.4s;
		color: #fe8d1c9d;
		/* text-shadow: -1px 0 #FE8D1C, 0 1px #f87d02, 1px 0 #dd7f20, 0 -1px #faa249; */
		opacity: 0.7;
	}
	.slider__btn button:hover {
		text-shadow: -1px 0 2px #FE8D1C, 0 1px 2px #f87d02, 1px 0 3px #dd7f20, 0 -1px 4px #faa249;
		border: none;
		box-shadow: inset 0px 0px 10px #FE8D1C;
		opacity: 1;
		color: black;
		transition: all 0.5s ease;
	}
	.slider__dot .dot.active {
		/* background: #000; */
		border-color: #000;
		box-shadow: -1px 1px 2px #fff;
		background: rgba(0, 0, 0, 0.4);
		/* position: relative; */
		transition: all 2s ease;
	}

	.slider__dot .dot.active::after {
		position: absolute;
		top: 0%;
		left: 00%;
		/* transform: translate(-50%, -50%); */
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0);
		z-index: -1;
		border: 1px solid #FE8D1C;
		box-shadow: -1px 1px 10px #FE8D1C;
		animation: rotate 3s linear infinite;
		pointer-events: none;

	}

	.slider__dot .dot.active::before {
		position: absolute;
		top: 0%;
		left: 00%;
		/* transform: translate(-50%, -50%); */
		content: '';
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0);
		z-index: -1;
		border: 1px solid rgb(243, 219, 6);
		box-shadow: -1px 1px 10px rgb(245, 180, 143);
		animation: rotate2 7s linear infinite;
		pointer-events: none;

	}