내가 만든 이미지 슬라이드
내가 만든 이미지 슬라이드
스스로 만들어본 이미지 슬라이드 방식
클래스를 추가함으로써 변화시킴
- 만든다.
- 이미지를 가로로 배치한다.
float: left;
- 이미지 한 개를 담는 이미지 박스에 설정한다.
- 이미지가 한 개만 뜨도록 한다.
overflow: hidden
- 이미지 슬라이더를 div tag에 복붙하고, 그 div에 설정한다.
- 애니메이션
- 변화
transform: translateX(-100vw);
- 의미 : 이미지 박스 가로 100vw임, 이미지 컨테이너를 -100vw이동하여, 다른 이미지가 보이도록 했음
- 이미지 css
- 전체 컨테이너
- 폯 300vw
- 이미지 박스
- 폯 100vw
- 이미지
- 폭 100%
- 이미지 박스를 전부 차지한다.
//html
<div style="overflow: hidden">
<div class="slide-container show-1-img">
<div class="slide-box">
<img src="img/money.jpg" />
</div>
<div class="slide-box">
<img src="img/coding.jpg" />
</div>
<div class="slide-box">
<img src="img/health.jpg" />
</div>
<div class="slide-box">
<img src="img/cat.jpg" />
</div>
</div>
</div>
<button class="slide-1-btn">1</button>
<button class="slide-2-btn">2</button>
<button class="slide-3-btn">3</button>
<button class="slide-4-btn">4</button>
//css
.slide-box {
width: 100vw;
float: left; //이미지를 가로로 배치되도록 한다.
}
.slide-box img {
width: 100%;
}
.slide-container {
width: 300vw;
transition: transform 1s;
}
.show-2-img {
transform: translateX(-100vw);
}
.show-3-img {
transform: translateX(-200vw);
}
.show-4-img {
transform: translateX(-300vw);
}
//js
//1번 버튼클릭하면, 1번 이미지로 이동
$(".slide-1-btn").on("click", function () {
$(".slide-container").addClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
});
$(".slide-2-btn").on("click", function () {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-2-img");
});
$(".slide-3-btn").on("click", function () {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-3-img");
});
$(".slide-4-btn").on("click", function () {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").addClass("show-4-img");
});
//오른쪽 버튼클릭하면, 오른쪽 이미지로 이동
$(".slide-left-btn").on("click", function () {
if ($(".slide-container").hasClass("show-4-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-3-img");
} else if ($(".slide-container").hasClass("show-3-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-2-img");
} else if ($(".slide-container").hasClass("show-2-img")) {
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-1-img");
}
});
$(".slide-right-btn").on("click", function () {
if ($(".slide-container").hasClass("show-1-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-2-img");
} else if ($(".slide-container").hasClass("show-2-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-3-img");
} else if ($(".slide-container").hasClass("show-3-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").addClass("show-4-img");
}
});
Author And Source
이 문제에 관하여(내가 만든 이미지 슬라이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@devyoon99/이미지-슬라이드-만들기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 이미지를 가로로 배치한다.
float: left;
- 이미지 한 개를 담는 이미지 박스에 설정한다.
- 이미지가 한 개만 뜨도록 한다.
overflow: hidden
- 이미지 슬라이더를 div tag에 복붙하고, 그 div에 설정한다.
- 변화
transform: translateX(-100vw);
- 의미 : 이미지 박스 가로 100vw임, 이미지 컨테이너를 -100vw이동하여, 다른 이미지가 보이도록 했음
- 전체 컨테이너
- 폯 300vw
- 이미지 박스
- 폯 100vw
- 이미지
- 폭 100%
- 이미지 박스를 전부 차지한다.
- 폭 100%
//html
<div style="overflow: hidden">
<div class="slide-container show-1-img">
<div class="slide-box">
<img src="img/money.jpg" />
</div>
<div class="slide-box">
<img src="img/coding.jpg" />
</div>
<div class="slide-box">
<img src="img/health.jpg" />
</div>
<div class="slide-box">
<img src="img/cat.jpg" />
</div>
</div>
</div>
<button class="slide-1-btn">1</button>
<button class="slide-2-btn">2</button>
<button class="slide-3-btn">3</button>
<button class="slide-4-btn">4</button>
//css
.slide-box {
width: 100vw;
float: left; //이미지를 가로로 배치되도록 한다.
}
.slide-box img {
width: 100%;
}
.slide-container {
width: 300vw;
transition: transform 1s;
}
.show-2-img {
transform: translateX(-100vw);
}
.show-3-img {
transform: translateX(-200vw);
}
.show-4-img {
transform: translateX(-300vw);
}
//js
//1번 버튼클릭하면, 1번 이미지로 이동
$(".slide-1-btn").on("click", function () {
$(".slide-container").addClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
});
$(".slide-2-btn").on("click", function () {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-2-img");
});
$(".slide-3-btn").on("click", function () {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-3-img");
});
$(".slide-4-btn").on("click", function () {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").addClass("show-4-img");
});
//오른쪽 버튼클릭하면, 오른쪽 이미지로 이동
$(".slide-left-btn").on("click", function () {
if ($(".slide-container").hasClass("show-4-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-3-img");
} else if ($(".slide-container").hasClass("show-3-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-2-img");
} else if ($(".slide-container").hasClass("show-2-img")) {
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-1-img");
}
});
$(".slide-right-btn").on("click", function () {
if ($(".slide-container").hasClass("show-1-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-2-img");
} else if ($(".slide-container").hasClass("show-2-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-4-img");
$(".slide-container").addClass("show-3-img");
} else if ($(".slide-container").hasClass("show-3-img")) {
$(".slide-container").removeClass("show-1-img");
$(".slide-container").removeClass("show-2-img");
$(".slide-container").removeClass("show-3-img");
$(".slide-container").addClass("show-4-img");
}
});
Author And Source
이 문제에 관하여(내가 만든 이미지 슬라이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@devyoon99/이미지-슬라이드-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)