Carousel (이미지 슬라이드) 직접만들기 2 : Next 버튼 만들기

[문지화]

선생님 안녕하세요.

아래와같이 img 대신 div 에 image-background 로 입력해서 작성했구, 

아래와같이 HTML작성하고 NEXT할 때 사진 개수 넣는 부분에서 아래와 같이 확장 코드로 작성해볼라고 하는데 자꾸  마지막 사진 이후 다음 페이지가 나와서요.

숫자도 3을 넣으면 다음 페이지가 나오고 숫자 2를 기입해야 마지막 사진 이후 다음페이지로

넘어가지 않습니다.

구글링해서 한번 해봤는데 코드가 맞는지는 잘 모르겠지만, 따로 오류 페이지는 뜨지 않는데,  자꾸 다음 페이지가 나와서 질문 드립니다.ㅠ 

감사합니다. 

----------------------------------------------------------------------------------------------

<h4 class="my-4 text-center">Showcase</h4>
<div class="container_warp">
<div class="slide-container">
<div class="slide-box">
<div class="image1"></div>
</div>
<div class="slide-box">
<div class="image2"></div>
</div>
<div class="slide-box">
<div class="image3"></div>
</div>
</div>
<div class="left-arrow"><i class="fas fa-chevron-left fa-4x"></i></div>
<div class="right-arrow"><i class="fas fa-chevron-right fa-4x"></i></div>
</div>

 

-----------------------------------

var imageNow = 1;
var imageNum = $('.slide-container').find('.slide-box').length;

$('.right-arrow').click(function(){

$('.slide-container').css('transform','translateX(-'+imageNow+'00vw)');

if( imageNow < imageNum ){
imageNow = imageNow +1;
}

});

[codingapple]

왜냐면 코드를 해석해보자면

imageNow가 1일때는 

버튼누르면 -100vw해주고 imageNow +1; 해줍니다

imageNow가 2일때는 

버튼누르면 -200vw해주고 imageNow +1; 해줍니다

imageNow가 3일때는 

버튼누르면 -300vw해주고 imageNow +1; 안해줌 

이렇게 코드를 짜서 그렇습니다 변수가 3일때 이미지 이동시키지 말라고 조건을 걸거나 그러면 되겠군요

[문지화]

아 해결하였습니당~ 

감사합니다

[문지화]

선생님.

정말 몇시간동안 새로 다시 해보고 했는데도 해결을 못하여 질문드립니다.

login버튼을 누르고 모달 창이 뜨고 나서 닫기버튼을 눌러 끄고 난후, 다시 로그인 버튼을 누르면 모달이 나오질 않습니다. 즉 1번밖에 작동이 안됩니다. 다시 작동이 되게 할려면 무조건 새로고침을 하고 다시 작동해야해요.

제가 구글링의 포인트를 못찾는건지, 이유를 모르겠어요.

a태그의 href=부분이 문제인가 해서 그부분을 없애봐도 안되네요. 

스크립트를 지우고 다시 작성하고도 해봤는데 해결이 안되서 문의 드립니다..

<div class="black-background" id="black-background">
<div class="white-background">
<p>로그인 해주세요.</p>
<form class="login.php" id="loginform">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" id="email">
<p class="alert-text">이메일을 입력해주세요.</p>
</div>
<div>
<input type="password" class="form-control" placeholder="Password" id="password">
<p class="alert-text1">비밀번호를 입력해주세요.</p>
</div>
<button type="submit" class="btn btn-primary submitbtn">전송</button>
</form>
<button type="button" class="closeBtn" id="closeBtn" a herf="#">닫기</button>
</div>
</div>
<nav class="nav-menu">
<h4 class="logo-title">Shirt Studio</h4>
<a href="#" id="nav-menu-btn">Product</a>
</nav>
<ul class="list-group menu-group">
<li class="list-group-item">Outer</li>
<li class="list-group-item">Shirt</li>
<li class="list-group-item">Pants</li>
</ul>

<div class="jumbotron main-background">
<h1 class="display-4">Shirt studio</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg loginBtn" href="#" role="button" id="login">Log in</a>
<a class="btn btn-danger btn-lg loginBtn " href="#" role="button" id="show-menu">show Menu</a>
</div>

-------------------------------------------

<script src="js/tab.js"></script>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
<script>
$('#login').click(function(){
$('.black-background').addClass('slide-down');
});

$('.black-background').click(function(e){
if(e.target == e.currentTarget){
$('.black-background').hide();
}

});
</script>

</body>

 

 

[codingapple]

열때는 slide-down 부착하고 닫을 때는 .hide() 써서 그런듯요?

닫을 때는 slide-down을 떼라고 코드를 짜시든가 아니면 

열때 slide-down클래스 부착이 아니라 slideDown() 함수를 써서 열든가 해봅시다

[글쓴이]

글