카운트업 + swiper슬라이드소스
본문
카운트업소스사용하여
안에 슬라이드 안에 카운트업소스를 사용했는데
옆으로 슬라이드 될때마다
숫자가 재카운트 됐으면하는데..
딱 맨앞에 있는 슬라이드 부분만 카운트업js 적용되네요
슬라이드 될때마다 카운트업이 되는 방법은 없을까요..
<style>
.swiper-wrapper_num{width:100%;}
</style>
<!-- Swiper -->
<div class="swiper-wrapper_num">
<div><span class="counter">123,456</span></div>
<div><span class="counter">123,456</span></div>
<div><span class="counter">123,456</span></div>
</div>
<script type="text/javascript">
$('.swiper-wrapper_num').slick({
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 2500, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
});
</script>
<!-- 지정된 숫자까지 카운트업하는 숫자 애니메이션 -->
<script>
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 10, // 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.
time: 1000 // 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.
});
});
</script>
<!--카운트업js-->
<script src="js/jquery.counterup.min.js"></script>
카운트업소스는
이거 참조하였습니다.
답변 1
<style>
.swiper-wrapper_num{width:100%;}
</style>
<!-- Swiper -->
<div class="swiper-wrapper_num">
<div><span class="counter1">123,456</span></div>
<div><span class="counter2">123,456</span></div>
<div><span class="counter3">123,456</span></div>
</div>
<script type="text/javascript">
$('.swiper-wrapper_num').slick({
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 2500, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
});
</script>
<!-- 지정된 숫자까지 카운트업하는 숫자 애니메이션 -->
<script>
jQuery(document).ready(function($) {
$('.counter1').counterUp({
delay: 10, // 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.
time: 1000 // 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.
});
$('.counter2').counterUp({
delay: 10, // 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.
time: 1000 // 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.
});
$('.counter3').counterUp({
delay: 10, // 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.
time: 1000 // 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.
});
});
</script>
<!--카운트업js-->
<script src="js/jquery.counterup.min.js"></script>
답변을 작성하시기 전에 로그인 해주세요.
