슬라이드 멈춤 재생 버튼을 만들 수 있을까요?
페이지 정보
작성자
본문
메인슬라이드 부분 멈춤 재생 버튼을 만들 수 있을까요?
https://k-develpoper.tistory.com/339
여기 참고해 보고 script.js / custom.js 파일 등을 참고해서 제작해보려는데 안되어서 문의드립니다.
<script>
</script>
이렇게 index.php에 입력하고 해보아도 잘안되어서 문의드립니다.
<script> 부분을
이렇게 변경해 보아도 안되어서 문의드립니다.
댓글목록
소프트존님의 댓글

제가 볼때는 버전문제 인것 같습니다.
아래코드는 아주 잘되고 있습니다.~
작업 잘 마무리 하시기 바라겠습니다.
수고하세요~
원아이티님의 댓글

해결을 하여서 답변을 남깁니다.
index.php 파일에 슬라이드 및 버튼을 만들고
<section class="main-slider">
<!-- 이미지 -->
<div class="item image">
<figure>
<div class="slide-image slide-media slider1" style="background-image:url('<?php echo G5_THEME_URL ?>/img/slider1_tmep.jpg');"><!-- 이미지 -->
<img data-lazy="<?php echo G5_THEME_URL ?>/img/slider1_tmep.jpg" class="image-entity" />
<!-- 이미지 -->
</div>
</figure>
</div>
<!-- 이미지 -->
<div class="item image">
<figure>
<div class="slide-image slide-media slider2" style="background-image:url('<?php echo G5_THEME_URL ?>/img/slider2_tmep.jpg?ver=20240312');"><!-- 이미지 -->
<img data-lazy="<?php echo G5_THEME_URL ?>/img/slider2_tmep.jpg?ver=20240312" class="image-entity" />
<!-- 이미지 -->
</div>
</figure>
</div>
<!-- 이미지 -->
<div class="item image">
<figure>
<div class="slide-image slide-media slider3" style="background-image:url('<?php echo G5_THEME_URL ?>/img/slider3_tmep.jpg');"><!-- 이미지 -->
<img data-lazy="<?php echo G5_THEME_URL ?>/img/slider3_tmep.jpg" class="image-entity" />
<!-- 이미지 -->
</div>
</figure>
</div>
</section>
<div>
<button class="play">시작</button>
<button class="stop">정지</button>
</div>
script.js 파일에 js 코드를 넣었습니다.
//start the slider
slideWrapper.slick({
fade:true,
autoplay:true,
autoplaySpeed:6000,// 슬라이드 속도 조절 1000 -> 1초
lazyLoad:"progressive",
speed:600,
/*dots:true,*/
arrows: true,
cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
});
$('.play').click(function(){
slideWrapper.slick('slickPlay');
});
$('.stop').click(function(){
slideWrapper.slick('slickPause');
});
index.php 파일에 play/stop 버튼 script를 넣었는데 이것을 script.js 파일에 넣으니까 작동이 되네요.
잘해결 되었습니다. 감사합니다.
소프트존님의 댓글

넵 수고하셨습니다.~!