캐러셀(carousel) 만들기
Last updated
Last updated
그럼 이미지 3장으로 간단한 캐러셀을 만들어보자.
이미지를 이런식으로 배치하고 버튼을 눌렀을 때 다른 이미지를 슬라이드 해주면 되겠다.
<div class="slide-container">
<div class="slide-box">
<img src="img/color1.png">
</div>
<div class="slide-box">
<img src="img/color2.png">
</div>
<div class="slide-box">
<img src="img/color3.png">
</div>
</div>
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img{
width: 100%;
}이렇게 하면 아래 스크롤 생김
slide-container 를 div로 감싸고 스타일을 주면
이미지 3개가 가로로 배치되고 나머지 2개의 이미지는 감춰진다.
<div style="overflow: hidden"> </div>이렇게 하고 버튼을 누를 때마다
slide-container css에 아래 속성 중 하나를 주면 변경 됨
margin-left: -200vw;
transform: translateX(-100vw);<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<script>
$('.slide-2').on('click', function (){
$('.slide-container').css('transform', 'translateX(-100vw)');
})
</script>🎈Intellij 여러 줄 편집
Alt +Shift + Insert or Alt + 드래그
✨ 과제. 1번과 3번 버튼도 완료해보자
✨ 과제. 완료한사람은 이전, 다음 버튼 추가하고 기능을 만들어보자.
<script>
$('.slide-1').on('click', function (){
$('.slide-container').css('transform', 'translateX(0vw)');
})
$('.slide-2').on('click', function (){
$('.slide-container').css('transform', 'translateX(-100vw)');
})
$('.slide-3').on('click', function (){
$('.slide-container').css('transform', 'translateX(-200vw)');
})
</script>
<button class="slide-4">이전</button>
<button class="slide-5">다음</button>
<script>
var picture = 1;
$('.slide-4').on('click', function (){
if(picture == 3){
$('.slide-container').css('transform', 'translateX(-100vw)');
picture--;
}else if(picture == 2){
$('.slide-container').css('transform', 'translateX(0vw)');
picture--;
}
})
$('.slide-5').on('click', function (){
if(picture == 1){
$('.slide-container').css('transform', 'translateX(-100vw)');
picture++;
}else if(picture == 2){
$('.slide-container').css('transform', 'translateX(-200vw)');
picture++;
}
})
</script>
.slide-4 -5 이렇게 하면 헷갈리지 않나?
prev next class 로 변경
네이밍의 중요성!
사진이 무조건 3장으로 고정일까?
4장 5장 그 이상이 되면 어떻게 해야할까? (확장성 고려)
$('.prev').on('click', function (){
$('.slide-container').css('transform', 'translateX(-'+(picture-2)+'00vw)');
picture--;
})
$('.next').on('click', function (){
$('.slide-container').css('transform', 'translateX(-'+picture+'00vw)');
picture++;
})이렇게 하면 완성
🔥이렇게 하면 두가지 오류가 있음 찾아보고 수정 해보자.
1번사진일때 이전 버튼을 계속 눌릴경우 or 마지막 사진일때 다음버튼을 계속 눌릴경우
n번 버튼을 누를 때 그이후엔 정상적 동작 안함
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="black-bg1">
<div class="white-bg">
<h4>로그인하세요</h4>
<form >
<div class="mb-3">
<input type="text" class="form-control" id="email">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password">
</div>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<span class="badge bg-dark ms-auto mx-3">Dark 🌛</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon "></span>
</button>
</div>
</nav>
<ul class="list-group" id="list1">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<button id="loginBtn" type="button" class="btn btn-primary">
버튼
</button>
<div class="alert alert-danger">
<span id="sec">5</span>초 이내에 구매 시 사은품 증정!
</div>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box">
<img src="img/color1.png">
</div>
<div class="slide-box">
<img src="img/color2.png">
</div>
<div class="slide-box">
<img src="img/color3.png">
</div>
</div>
</div>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<script>
$('.slide-2').on('click', function (){
$('.slide-container').css('transform', 'translateX(-100vw)');
})
</script>
<script>
$('#loginBtn').on('click', function(){
$('.black-bg1').addClass('show-modal1');
});
$('#close').on('click', function() {
$('.black-bg1').removeClass('show-modal1');
})
$('.navbar-toggler').on('click', function() {
$('.list-group').toggleClass('lg-open');
});
$('form').on('submit', function (e){
console.log(document.getElementById('email').value);
if($('#email').val() == ''){
alert('아이디를 입력하세요');
e.preventDefault(); // 폼 전송 막는 코드
}
var regExp = /^([\w\.\_\-])*[a-zA-Z0-9]+([\w\.\_\-])*([a-zA-Z0-9])+([\w\.\_\-])+@([a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,8}$/i;
if(!regExp.test($('#email').val())){
alert("이메일 형식을 확인하세요");
e.preventDefault();
}
if($('#password').val() == ''){
alert('패스워드를 입력하세요');
}else if($('#password').val().length <4){
alert('패스워드는 4자 이상이어야 합니다.');
}
});
//badge 클릭 시 글자를 Dark > Light 변경
var count = 0;
$('.badge').on('click', function (){
count++;
// count += 1;
// count = count+1;
console.log(count);
console.log(count % 2);
if(count % 2 === 0){
$('.badge').html('Dark 🌛');
$('.navbar').removeClass('navbar-dark');
$('.navbar').removeClass('bg-dark');
$('.navbar').addClass('navbar-light')
$('.navbar').addClass('bg-light')
}else if(count %2 === 1){
$('.badge').html('Light 🌞');
$('.navbar').removeClass('navbar-light');
$('.navbar').removeClass('bg-light');
$('.navbar').addClass('navbar-dark')
$('.navbar').addClass('bg-dark')
}
});
var sec = 5;
var interval = setInterval(function () {
sec--;
console.log(sec);
//4 3 2 1 0 -1 -2
if(sec > 0){
$('#sec').html(sec);
}else if(sec == 0){
$('.alert').hide();
stop();
}
}, 1000)
function stop(){
clearInterval(interval)
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>
