jquery 이용해서 슬라이더를 만드려는데요..
티스토리에서 슬라이더를 만드려는데 아래 코드로 만들어서 진행시에 초기 웹페이지가 로드되고 1페이지부터 차근차근 뜨는게 아니라 2페이지가 잠깐동안 계속 떠있다가 3페이지부터 정상적으로 자동 넘김이 되는데요..
초기화를 해줘야하는것 같은데 이것저것 다 해봐도 안되서 혹시 해결이 가능하신 분이 계실까요? ㅠㅠ
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="slider-1">
<div class="slides">
<div class="active" style="background-image:url(https://images.prismic.io/stayfolio-production/73f99b79-336f-47fd-8ace-afc00978147d_banner.jpg?auto=compress,format);"></div>
<div style="background-image:url(https://images.prismic.io/stayfolio-production/038914a1-9b23-4f26-9b10-84669d9a1339_banner.jpg?auto=compress,format);"></div>
<div style="background-image:url(https://images.prismic.io/stayfolio-production/586abdef-7163-4629-9c39-6d7a627ae10e_01_banner_picture.jpg?auto=compress,format);"></div>
<div style="background-image:url(https://images.prismic.io/stayfolio-production/3b4bf417-3c41-4d05-b62c-f02a293ba115_banner.jpg?auto=compress,format);"></div>
</div>
<div class="page-btns">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="side-btns">
<div>
<span><i class="fas fa-angle-left"></i></span>
</div>
<div>
<span><i class="fas fa-angle-right"></i></span>
</div>
</div>
</div>
/* 폰트 적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
font-family: "Noto Sans KR", sans-serif;
}
/* 노말라이즈 */
body, ul, li, h1, h2, h3, h4, h5 {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* 커스텀 */
/* 슬라이더 1 시작 */
.slider-1 {
height:400px;
position:relative;
}
/* 슬라이더 1 - 페이지 버튼 */
.slider-1 > .page-btns {
text-align:center;
position:absolute;
bottom:20px;
left:0;
width:100%;
}
.slider-1 > .page-btns > div {
width:20px;
height:20px;
background-color:rgba(255,255,255,.5);
border-radius:4px;
display:inline-block;
cursor:pointer;
}
.slider-1 > .page-btns > div.active {
background-color:rgba(255,255,255,1);
}
/* 슬라이더 1 - 슬라이드 */
.slider-1 > .slides > div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
transition: opacity 0.3s;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}
.slider-1 > .slides > div.active {
opacity:1;
}
/* 슬라이더 좌우 버튼 */
.slider-1 > .side-btns > div {
position:absolute;
top:0;
left:0;
width:25%;
height:100%;
cursor:pointer;
}
.slider-1 > .side-btns > div:last-child {
left:auto;
right:0;
}
.slider-1 >.side-btns > div > span {
position:absolute;
top:50%;
left:20px;
transform:translatey(-50%);
background-color:white;
opacity:0.5;
padding:1px 13px;
border-radius:50px;
font-size:25px;
}
.slider-1 >.side-btns > div:last-child > span {
left:auto;
right:20px;
}
/* 슬라이더 1 끝 */
// 기존 버튼형 슬라이더
$('.slider-1 > .page-btns > div').click(function(){
var $this = $(this);
var index = $this.index();
$this.addClass('active');
$this.siblings('.active').removeClass('active');
var $slider = $this.parent().parent();
var $current = $slider.find(' > .slides > div.active');
var $post = $slider.find(' > .slides > div').eq(index);
$current.removeClass('active');
$post.addClass('active');
});
// 좌/우 버튼 추가 슬라이더
$('.slider-1 > .side-btns > div').click(function(){
var $this = $(this);
var $slider = $this.closest('.slider-1');
var index = $this.index();
var isLeft = index == 0;
var $current = $slider.find(' > .page-btns > div.active');
var $post;
if ( isLeft ){
$post = $current.prev();
}
else {
$post = $current.next();
};
if ( $post.length == 0 ){
if ( isLeft ){
$post = $slider.find(' > .page-btns > div:last-child');
}
else {
$post = $slider.find(' > .page-btns > div:first-child');
}
};
$post.click();
});
setInterval(function(){
$('.slider-1 > .side-btns > div').eq(1).click();
}, 3000);
