에티테마

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

페이지 정보

작성자 no_profile 원아이티 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 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>
    <button class="play">시작</button>
    <button class="stop">정지</button>
</div>

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

<script> 부분을 
$('.play').on('click',function(){
slideWrapper.trigger('play.autoplay',[1000])
})
$('.stop').on('click',function(){
slideWrapper.trigger('stop.autoplay')
})

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


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

소프트존님의 댓글

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

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


<!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/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/[email protected]/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>

원아이티님의 댓글

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

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

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


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

Total 1,240건 3 페이지
질문답변 목록
번호 제목 날짜
1180
1:1문의(비회원)에 대하여 질문 드립니다. 댓글+ 1개
시간 : 05-27
05-27
1179
서브메뉴의 순서가 이상합니다. 댓글+ 1개
시간 : 05-27
05-27
1178
그누보드 프로그램 구동시 상단 TETX 수정 경로 질문입니다. 댓글+ 3개
시간 : 05-24
05-24
1177
아래 알려주신 내용을 확인해보니 가운데 내용을 수정하는 내용은 없는 것 같아요?? 댓글+ 2개
시간 : 05-24
05-24
1176
2가지 문의 드립니다. 댓글+ 2개
시간 : 05-24
05-24
1175
하단 주소변경은 어느 파일에서 하나요? 댓글+ 1개
시간 : 05-23
05-23
1174
t26 구매하여 사용하고 있는데 질문좀 드립니다 댓글+ 2개
시간 : 05-23
05-23
1173
eyt_install시 에러 발생 댓글+ 2개
시간 : 05-23
05-23
1172
구매한 테마 갤러리 글쓰기 했는데.. 댓글+ 2개
시간 : 05-20
05-20
1171
테마 구매했습니다. 근데 수정하다 보니 질문이 있어요 댓글+ 5개
시간 : 05-20
05-20
열람중
슬라이드 멈춤 재생 버튼을 만들 수 있을까요? 댓글+ 3개
시간 : 05-17
05-17
1169
유투브 쇼츠 링크 게시판 활용에 적합한 테마가 있을까요? 댓글+ 1개
시간 : 05-14
05-14
1168
접속이 안되네요 댓글+ 1개
시간 : 05-12
05-12
1167
모바일 화면에서 상단부분을 줄이고 싶은데 어떻게 해야 하나요? 댓글+ 3개
시간 : 05-09
05-09
1166
one 테마를 사용하고 있는데 상단 서브이미지가 모바일에서 줄어들지 않아요 댓글+ 7개
시간 : 05-09
05-09
1165
Trying to access array offset on value of type null in on line 오류문의 댓글+ 5개
시간 : 05-07
05-07
1164
인덱스페이지 제품소개 메뉴설정에서 설정후 게시판연동 에서 설정하는방법부탁드리니다 댓글+ 11개
시간 : 05-05
05-05
1163
인덱스화면에 제품소개 출력관련 댓글+ 2개
시간 : 05-04
05-04
1162
어제 에티테마 25를 구매하고 셋팅을 하고 처음 접속은 잘 되는데요. 로고를 클릭하면 랙이 걸리네요. 댓글+ 1개
시간 : 05-02
05-02
1161
테마 설치 후 설정 문의(완전 초보) 댓글+ 4개
시간 : 05-02
05-02
1160
모발일홈페이지 반응형에 짤리는부분 댓글+ 1개
시간 : 04-24
04-24
1159
본서버에 작업된 테마를 올렸더니.. 댓글+ 3개
시간 : 04-21
04-21
1158
이제 두가지만 해결하면 될것 같습니다. 댓글+ 2개
시간 : 04-18
04-18
1157
갤러리 최신글 스킨 문의드립니다. 댓글+ 2개
시간 : 04-17
04-17
1156
게시판 생성 문제 질문입니다 댓글+ 2개
시간 : 04-17
04-17
1155
네비게이션 반응형 수정하려고 합니다. 댓글+ 4개
시간 : 04-11
04-11
1154
하위메뉴 롤오버시 배경문의, 다국어 댓글+ 8개
시간 : 04-09
04-09
1153
오랜만에 질문 하나 드려봅니다. 댓글+ 5개
시간 : 04-07
04-07
1152
모바일에서 접속을 하면 왼쪽 사이드바의 카테고리 하단에 메뉴가 나오질 않네요 댓글+ 2개
시간 : 04-05
04-05
1151
서브 메뉴 현재 위치 표시 문제 댓글+ 3개
시간 : 03-30
03-30
게시물 검색

테마몰

테마몰

카테고리

카테고리
질문답변
 메뉴얼

라이브러리

라이브러리
CSS - ANIMATION / ANIMATE.…
FlexSlider2 - 플렉스슬라이드2