슬라이드 멈춤 재생 버튼을 만들 수 있을까요?

페이지 정보

작성자 원아이티 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 3건 작성일 24-05-17 11:02

본문

테마명 :[ 유료 와이드 테마 ] 기업/비즈니스/회사 반응형 홈페이지

메인슬라이드 부분 멈춤 재생 버튼을 만들 수 있을까요?

https://k-develpoper.tistory.com/339

여기 참고해 보고 script.js / custom.js 파일 등을 참고해서 제작해보려는데 안되어서 문의드립니다.

<script>

$('.play').click(function(){

slideWrapper.slick("slickPlay");

});

$('.stop').click(function(){

slideWrapper.slick("slickPause");

});
</script>

<div>

</div>

이렇게 index.php에 입력하고 해보아도 잘안되어서 문의드립니다.

<script> 부분을

$('.play').on('click',function(){

slideWrapper.trigger('play.autoplay',[1000])

})

$('.stop').on('click',function(){

slideWrapper.trigger('stop.autoplay')

})

이렇게 변경해 보아도 안되어서 문의드립니다.

검색

댓글목록

소프트존님의 댓글

소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

작성일 24-05-17 11:47

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

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>


<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


 </head>
 <body>
  <div class="container">
    <div class="visual">
        <div><img src="https://via.placeholder.com/500x500" alt=""></div>
        <div><img src="https://via.placeholder.com/500x500" alt=""></div>
        <div><img src="https://via.placeholder.com/500x500" alt=""></div>
    </div>
    <div class="controler">
        <button class="play">시작</button>
        <button class="stop">정지</button>
    </div>
</div>
 </body>
</html>


<script>
$('.visual').slick({
    autoplay : true, 
    autoplaySpeed : 1000,
    arrows : false, 
}); 
 
$('.play').click(function(){
    $('.visual').slick('slickPlay');
});
 
$('.stop').click(function(){
    $('.visual').slick('slickPause');
});
</script>

제가 볼때는 버전문제 인것 같습니다. 아래코드는 아주 잘되고 있습니다.~ 작업 잘 마무리 하시기 바라겠습니다. 수고하세요~ <div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div>&lt;!DOCTYPE html&gt;</div><div>&lt;html lang="en"&gt;</div><div>&nbsp;&lt;head&gt;</div><div>&nbsp; &lt;meta charset="UTF-8"&gt;</div><div>&nbsp; &lt;meta name="Generator" content="EditPlus®"&gt;</div><div>&nbsp; &lt;meta name="Author" content=""&gt;</div><div>&nbsp; &lt;meta name="Keywords" content=""&gt;</div><div>&nbsp; &lt;meta name="Description" content=""&gt;</div><div>&nbsp; &lt;title&gt;Document&lt;/title&gt;</div> <div>&lt;link rel="stylesheet" type="text/css" href="<a href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css</a>"/&gt;</div><div>&lt;script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js</a>"&gt;&lt;/script&gt;</div><div>&lt;script type="text/javascript" src="<a href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js</a>"&gt;&lt;/script&gt;</div> <div>&nbsp;&lt;/head&gt;</div><div>&nbsp;&lt;body&gt;</div><div>&nbsp; &lt;div class="container"&gt;</div><div>&nbsp; &nbsp; &lt;div class="visual"&gt;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;&lt;img src="<a href="https://via.placeholder.com/500x500">https://via.placeholder.com/500x500</a>" alt=""&gt;&lt;/div&gt;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;&lt;img src="<a href="https://via.placeholder.com/500x500">https://via.placeholder.com/500x500</a>" alt=""&gt;&lt;/div&gt;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;&lt;img src="<a href="https://via.placeholder.com/500x500">https://via.placeholder.com/500x500</a>" alt=""&gt;&lt;/div&gt;</div><div>&nbsp; &nbsp; &lt;/div&gt;</div><div>&nbsp; &nbsp; &lt;div class="controler"&gt;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="play"&gt;시작&lt;/button&gt;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; &lt;button class="stop"&gt;정지&lt;/button&gt;</div><div>&nbsp; &nbsp; &lt;/div&gt;</div><div>&lt;/div&gt;</div><div>&nbsp;&lt;/body&gt;</div><div>&lt;/html&gt;</div> <div>&lt;script&gt;</div><div>$('.visual').slick({</div><div>&nbsp; &nbsp; autoplay : true, </div><div>&nbsp; &nbsp; autoplaySpeed : 1000,</div><div>&nbsp; &nbsp; arrows : false, </div><div>}); </div><div>&nbsp;</div><div>$('.play').click(function(){</div><div>&nbsp; &nbsp; $('.visual').slick('slickPlay');</div><div>});</div><div>&nbsp;</div><div>$('.stop').click(function(){</div><div>&nbsp; &nbsp; $('.visual').slick('slickPause');</div><div>});</div><div>&lt;/script&gt;</div></div>

원아이티님의 댓글

원아이티 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

작성일 24-05-17 12:25

해결을 하여서 답변을 남깁니다.

index.php 파일에 슬라이드 및 버튼을 만들고

<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="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="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>

</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 파일에 넣으니까 작동이 되네요.

잘해결 되었습니다. 감사합니다.

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