에티테마

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

페이지 정보

작성자 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,251건 2 페이지
질문답변 목록
번호 제목 날짜
1221
모바일 메뉴 문의 댓글+ 4개
시간 : 10-14
10-14
1220
element.style 수정하려면 어느 파일에 있나요??? 댓글+ 6개
시간 : 10-12
10-12
1219
제품소개 게시판에 대해 두가지 질문 드립니다. 댓글+ 1개
시간 : 10-11
10-11
1218
메뉴설정 댓글+ 6개
시간 : 10-04
10-04
1217
메일문의 댓글+ 8개
시간 : 10-04
10-04
1216
게시판 url 댓글+ 1개
시간 : 09-27
09-27
1215
테마사용중 문의 댓글+ 2개
시간 : 09-27
09-27
1214
비즈니스 테마 접속 댓글+ 1개
시간 : 09-24
09-24
1213
상단 네비게이션 연동 시 헤더 아래부터 빈 화면만 출력됩니다. 댓글+ 9개
시간 : 09-20
09-20
1212
테마사용 문의 댓글+ 6개
시간 : 09-14
09-14
1211
테마작업중 문의 댓글+ 5개
시간 : 09-13
09-13
1210
테마문의 댓글+ 2개
시간 : 09-12
09-12
1209
테마 문의 댓글+ 2개
시간 : 09-11
09-11
1208
테마 최근게시물 질문 댓글+ 10개
시간 : 09-06
09-06
1207
테마 설치에러 문의 댓글+ 6개
시간 : 09-05
09-05
1206
테마 구매후 작업중 문의 댓글+ 1개
시간 : 08-29
08-29
1205
테마변경후 비회원 구매가 안뜨네요. 댓글+ 1개
시간 : 08-18
08-18
1204
좌측메뉴가 포함된 테마가 있을까요? 댓글+ 4개
시간 : 08-06
08-06
1203
7페이지 구입 했는데 댓글+ 1개
시간 : 08-04
08-04
1202
FAQ 부분의 영상수정은 어디서 가능할까요? 댓글+ 1개
시간 : 07-31
07-31
1201
답변 감사드립니다. 댓글+ 1개
시간 : 07-26
07-26
1200
해당부분에 대한 수정문의 드립니다. 댓글+ 1개
시간 : 07-26
07-26
1199
컨택트 페이지 주소가 바뀌어 오류가 발생할까요? 댓글+ 6개
시간 : 07-26
07-26
1198
네비메뉴 부분 문의드립니다. 댓글+ 1개
시간 : 07-25
07-25
1197
문의사항 메일알림 댓글+ 18개
시간 : 07-24
07-24
1196
구매후 설치시 오류 문의드립니다. 댓글+ 2개
시간 : 07-23
07-23
1195
안녕하세요. 반응형 관련 질문드립니다. 댓글+ 3개
시간 : 07-22
07-22
1194
구매문의드립니다. 댓글+ 2개
시간 : 07-18
07-18
1193
홈페이지내의 메일기능 궁금한 사항이 있습니다. 댓글+ 4개
시간 : 07-16
07-16
1192
호스팅 변경 후 접속 에러 댓글+ 11개
시간 : 07-11
07-11
게시물 검색

테마몰

테마몰

카테고리

카테고리
질문답변
 메뉴얼

라이브러리

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