-
이유가 뭐인지 모르겠지만 슬라이드 2번이 작동 되지 않아서요
콘솔 검색을 해도 오류사항이 없는데 이유가 무엇일까요??
css 파일은 외부 스타일시트입니다.
<h2>HTML</h2>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Hello, world!</title>
</head>
<body class="light"><div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="email">
</div>
<div class="my-3">
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary" id="send">전송</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">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-black">Dark 🔄</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<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>
<div class="main-bg">
<h4>Shirts on Sale</h4>
<button id="login" class="btn btn-danger">로그인</button>
</div><div style="overflow:hidden">
<div class="slide-container">
<div class="slide-box">
</div>
<div class="slide-box">
</div>
<div class="slide-box">
</div>
</div>
</div>
<button class=slide-1">1</button>
<button class=slide-2">2</button>
<button class=slide-3">3</button><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>$('form').on('submit', function(e){
var 입력한값 = document.getElementById('email').value;
if(/\s+@\s+.\s+/.test(입력한값) == false ){
alert('이메일형식아님');
}
})$('form').on('submit', function(e){
var 비번 = document.getElementById('password').value;
if(/A-Z/.test(비번) == false ){
alert('대문자 없는데요');
}
})$('.slide-2').on('click', function() {
$('.slide-container').css('transform', 'translateX(-100vw)');
})$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
})$('#close').on('click', function(){
$('.black-bg').fadeOut();
})document.querySelector('.navbar-toggler').addEventListener('click', function(){
document.querySelectorAll('.list-group')[0].classList.toggle('show');
})</script>
</body>
</html>
<h2>css</h2>
@charset "utf-8";
.alert-box{ display:none; background:#3dacd9; color:#2191bf; padding:20px; border-radius:5px; }
.list-group{ display:none; }
.show{ display:block; }.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
visibility: hidden;
opacity:0;
transition: all 1s;}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}.slide-container{ width:300vw; transition: all 1s; }
.slide-box{ width:100vw; float:left; }
.slide-box img{ width:100%; }.show-modal{ visibility:visible; opacity:1; }
.main-bg{ padding:100px 20px; background:lightgrey; }
.dark{ background:black; color:white; }
- 답변은 로그인 후 가능합니다.