codepen 자동슬라이드로 하고 싶습니다~
본문
https://codepen.io/gespinosa/pen/gJaQRK
codepen 에서 슬라이드 찾다가 쓸만한걸 찾았는데 자동이 아니네요 ㅠㅠ
혹시 자동으로 구현 하려면 많이 복잡 할까요?
답변 2
아래 코드를 추가해 보세요
let interval_time = 3000;
let index = 1;
$(document).ready(function() {
setInterval(function() {
index++;
if (index > $('.slide-nav').length) index = 1;
$('.slider__navi').find('.slide-nav[data-slide=' + index + ']').click();
}, interval_time);
});
감사합니다. ^^ 바로 적용되네요 ~
취미생활님 적용후 잘 사용하고 있습니다. 근데 익스에서는 자동이 안되는데
소스 한번 봐 주세요~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>main_slider</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Thambi+2&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
</head>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider__warpper{
position: relative;
width: 100%;
height: 100vh;
margin-top: -85px;
}
.slider__navi {
position: absolute;
top: 8%;
right: 20px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
z-index: 9;
}
.slider__navi a {
border-radius: 10px;
display: block;
height: 6px;
width: 20px;
margin: 20px 0;
text-indent: -9999px;
box-shadow: none;
border: none;
background: #fff;
}
.slider__navi a.active {
background: #d5515e;
}
/* body {
position: relative;
font-size: 100%;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
min-height: 100vh;
} */
.flex__container {
position: absolute;
top: 0;
left: 0;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
-o-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
height: 100vh;
width: 100%;
z-index: 1;
}
.flex__container.flex--active {
z-index: 2;
}
.text--sub {
font-size: 12px;
letter-spacing: 0.1rem;
text-transform: uppercase;
margin-bottom: 20px;
}
.text--big {
font-family: 'Baloo Thambi 2', cursive;
font-size: 7em;
font-weight: lighter;
line-height: 85px;
margin-left: -8px;
}
.text--normal {
font-size: 14px;
color: #000;
line-height: 22px;
margin-top: 25px;
}
.text__background {
position: absolute;
left: 72px;
bottom: -7px;
color: rgba(0,0,0,0.05);
font-size: 170px;
font-weight: 700;
}
.flex__item {
height: 100vh;
color: #000;
transition: transform 0.1s linear;
}
.flex__item--left {
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
width: 65%;
transform-origin: left bottom;
transition: transform 0.1s linear 0.4s;
opacity: 0;
position: relative;
overflow: hidden;
}
.flex__item--right {
width: 35%;
transform-origin: right center;
transition: transform 0.1s linear 0s;
opacity: 0;
}
.flex--preStart .flex__item--left,
.flex--preStart .flex__item--right,
.flex--active .flex__item--left,
.flex--active .flex__item--right {
opacity: 1;
}
/* 01 */
.flex--pikachu .flex__item--left {
background: url(/img/slider_01.jpg) 50% 50% no-repeat;
background-size: cover;
}
.flex--pikachu .flex__item--right {
background: url(/img/slider_s01.jpg)50% 50%no-repeat;
background-size: cover;
background-color: #fff;
}
/* 02 */
.flex--piplup .flex__item--left {
background: url(/img/slider_02.jpg)50% 50% no-repeat;
background-size: cover;
}
.flex--piplup .flex__item--right {
background: url(/img/slider_s02.jpg)50% 50% no-repeat;
background-size: cover;
background-color: #fff;
}
/* 03 */
.flex--blaziken .flex__item--left {
background: url(/img/slider_03.jpg)50% 50% no-repeat;
background-size: cover;
}
.flex--blaziken .flex__item--right {
background: url(/img/slider_s03.jpg)50% 50% no-repeat;
background-size: cover;
background-color: #fff;
}
/* 04 */
.flex--dialga .flex__item--left {
background: url(/img/slider_04.jpg)50% 50% no-repeat;
background-size: cover;
}
.flex--dialga .flex__item--right {
background: url(/img/slider_s04.jpg)50% 50% no-repeat;
background-size: cover;
background-color: #fff;
}
/* 05 */
.flex--zekrom .flex__item--left {
background: url(/img/slider_05.jpg)50% 50%no-repeat;
background-size: cover;
}
.flex--zekrom .flex__item--right {
background: url(/img/slider_s05.jpg)50% 50%no-repeat;
background-size: cover;
background-color: #fff;
}
.flex__content {
margin-left: 80px;
width: 50%;
opacity: 1;
transform: translate3d(0,0,0);
transition: transform 0.2s linear 0.2s, opacity 0.1s linear 0.2s;
}
.pokemon__img {
font-weight: bold;
position: absolute;
bottom: 50px;
right: 14%;
/* max-height: 40vw; */
font-size: 1.3rem;
opacity: 1;
transform: translate3d(0,0,0);
transition: opacity 0.33s 0.3s, transform 0.3s 0.35s cubic-bezier(0, 0.88, 0.4, 0.93);
}
/* Animate-START point */
.flex__container.animate--start .flex__content {
transform: translate3d(0,-200%,0);
opacity: 0;
}
.flex__container.animate--start .pokemon__img {
transform: translate3d(-100px,0,0);
opacity: 0;
}
/* Animate-END point */
.flex__container.animate--end .flex__item--left {
transform: scaleY(0);
}
.flex__container.animate--end .flex__item--right {
transform: scaleX(0);
}
.flex__container.animate--end .flex__content {
transform: translate3d(0,200%,0);
opacity: 0;
}
.flex__container.animate--end .pokemon__img {
transform: translate3d(200px,0,0);
opacity: 0;
}
@media(max-width:1200px){
.text__background{
display: none;
}
}
@media(max-width:1024px){
.slider__navi a{
background: #9b9b9b;
}
.flex__item--right {
display: none;
position: absolute;
right: 0;
width: 25%;
height: 290px;
bottom: 0;}
.flex__content {
margin-left: 30px;
}
.pokemon__img {
display: none;
position: absolute;
bottom: 10px;
right: 2%;
font-size: 1rem;}
.flex__item--left{
width: 100%;
}
/* 01 */
.flex--pikachu .flex__item--right {
background-size: 100%;
}
/* 02 */
.flex--piplup .flex__item--right {
background-size: 100%;
}
/* 03 */
.flex--blaziken .flex__item--right {
background-size:100%;
}
/* 04 */
.flex--dialga .flex__item--left{
background: url(/img/slider_04.jpg)70% no-repeat }
.text--big {
font-size: 5em;
line-height: 0.9;
}
}
@media(max-width:639px){
.text--normal, .flex__item--right, .pokemon__img{
display: none;
}
.text--big {
font-size: 3.5em;
line-height: 1;
}
.flex__content {
width: 70%;}
.slider__navi a{
margin: 15px 0;
background: #eee;
}
.text--sub{
margin-bottom: 10px;
}
/* 04 */
.flex--dialga .flex__item--left{
background: url(/img/slider_04.jpg)75% no-repeat }
/* 05 */
.flex--zekrom .flex__item--left{
background: url(/img/slider_s05.jpg)50% 50%no-repeat;}
.flex_txt{
color:#000 !important;
}
}
</style>
<body>
<div class="slider__warpper">
<div class="flex__container flex--pikachu flex--active" data-slide="1">
<div class="flex__item flex__item--left">
<div class="flex__content">
<p class="text--sub" >숏레그 먼치킨 </p>
<h1 class="text--big">Standard Munchkin Cat</h1>
<p class="text--normal">짧은다리가 매력포인트인 고양이 먼치킨.<br>
견종 닥스훈트나 웰시 코기처럼 팔다리가 짧고 허리가 긴 고양이 종
</p>
</div>
<p class="text__background">Munchkin</p>
</div>
<div class="flex__item flex__item--right"></div>
<!-- <div class="pokemon__img"><a href="">+ detail view</a></div> -->
</div>
<div class="flex__container flex--piplup animate--start" data-slide="2">
<div class="flex__item flex__item--left">
<div class="flex__content">
<p class="text--sub">브리티시 숏헤어</p>
<h1 class="text--big" >British shorthair Cat</h1>
<p class="text--normal">장난기 넘치고 애정이 많은 고양이인 브리티시 숏헤어는 <br> 충성심이 강하며 독거인에게 좋은 반려묘입니다.</p>
</div>
<p class="text__background">British</p>
</div>
<div class="flex__item flex__item--right"></div>
<!-- <img class="pokemon__img" src="img/slider_s02.jpg"/> -->
<!-- <div class="pokemon__img"><a href="">+ detail view</a></div> -->
</div>
<div class="flex__container flex--blaziken animate--start" data-slide="3">
<div class="flex__item flex__item--left">
<div class="flex__content">
<p class="text--sub">랙돌
</p>
<h1 class="text--big">Rag Doll</h1>
<p class="text--normal"> 크고 긴 체형의 고양이인 렉돌은 사람들과 잘 어울리며 <br> 아파트 거주자들에게 이상적인 반려묘가 될 수 있습니다.</p>
</div>
<p class="text__background">Rag Doll</p>
</div>
<div class="flex__item flex__item--right"></div>
<!-- <div class="pokemon__img"><a href="">+ detail view</a></div> -->
</div>
<div class="flex__container flex--dialga animate--start" data-slide="4">
<div class="flex__item flex__item--left">
<div class="flex__content">
<p class="text--sub">샐커크 렉스 </p>
<h1 class="text--big">Selkirk Rex</h1>
<p class="text--normal">곱슬곱슬한 고양이 계의 푸들.<br> 털 안빠지는 고양이로도 유명하죠~! </p>
</div>
<p class="text__background">Selkirk Rex</p>
</div>
<div class="flex__item flex__item--right"></div>
<!-- <div class="pokemon__img"><a href="">+ detail view</a></div> -->
</div>
<div class="flex__container flex--zekrom animate--start" data-slide="5">
<div class="flex__item flex__item--left">
<div class="flex__content">
<p class="text--sub flex_txt" style="color:#fff;">러시안블루</p>
<h1 class="text--big flex_txt" style="color:#fff;">Russian Blue</h1>
<p class="text--normal flex_txt" style="color:#fff;">애정이 넘치는 성격이면서도 낯가림을 하는 편입니다.<br> 친해지는 데에 시간이 걸리지만 한번 마음을 열면 변치 않는 신뢰를 보여준답니다.</p>
</div>
<p class="text__background">Russian Blue</p>
</div>
<div class="flex__item flex__item--right"></div>
<!-- <div class="pokemon__img"><a href=""> + detail view</a></div> -->
</div>
</div>
<div class="slider__navi">
<a href="#" class="slide-nav active" data-slide="1">pikachu</a>
<a href="#" class="slide-nav" data-slide="2">piplup</a>
<a href="#" class="slide-nav" data-slide="3">blaziken</a>
<a href="#" class="slide-nav" data-slide="4">dialga</a>
<a href="#" class="slide-nav" data-slide="5">zekrom</a>
</div>
</body>
</html>
<script>
$('.slide-nav').on('click', function(e) {
e.preventDefault();
// get current slide
var current = $('.flex--active').data('slide'),
// get button data-slide
next = $(this).data('slide');
$('.slide-nav').removeClass('active');
$(this).addClass('active');
if (current === next) {
return false;
} else {
$('.slider__warpper').find('.flex__container[data-slide=' + next + ']').addClass('flex--preStart');
$('.flex--active').addClass('animate--end');
setTimeout(function() {
$('.flex--preStart').removeClass('animate--start flex--preStart').addClass('flex--active');
$('.animate--end').addClass('animate--start').removeClass('animate--end flex--active');
}, 800);
}
});
</script>
<!-- 자동 슬라이드 추가 2020-05-08 -->
<script>
let interval_time = 6000;
let index = 1;
$(document).ready(function() {
setInterval(function() {
index++;
if (index > $('.slide-nav').length) index = 1;
$('.slider__navi').find('.slide-nav[data-slide=' + index + ']').click();
}, interval_time);
});
</script>
자체 해결 했습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1
이게 문제였네요 ^^;
답변을 작성하시기 전에 로그인 해주세요.
