에티테마

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

페이지 정보

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


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

게시물 검색
질문답변 목록
번호 제목 날짜
1269
좌측에서 열리는 아이콘을 빼고 싶습니다. 댓글+ 1개
시간 : 04-02
04-02
1268
공지사항 글보기에서 사이드에 있는 customer 박스 내용은 어느 파일에서 수정하나요? 댓글+ 1개
시간 : 03-31
03-31
1267
문의하기 글쓰기가 안되는거 같습니다. 댓글+ 11개
시간 : 03-20
03-20
1266
PDF파일 용량이 ? 댓글+ 3개
시간 : 03-14
03-14
1265
첨부파일이 안올라 가네요? 댓글+ 4개
시간 : 03-14
03-14
1264
서브페이지 상단 롤링 이미지 속도 조절 댓글+ 2개
시간 : 03-12
03-12
1263
T303 테마 갤러리 이미지 업로드가 안되는 문제 입니다 댓글+ 11개
시간 : 03-11
03-11
1262
글씨크기 및 폰트변경 방법 댓글+ 4개
시간 : 02-24
02-24
1261
게시판 권한 확인했는데도 게시글 수정 버튼이 안나옵니다. 댓글+ 17개
시간 : 02-20
02-20
1260
phpmyadmin 업그레이드 문의드립니다 댓글+ 2개
시간 : 02-18
02-18
1259
ip 문의드립니다 댓글+ 3개
시간 : 02-10
02-10
1258
게시판 위쪽 여백을 줄이는 방법 좀 알수 있을까요? 댓글+ 2개
시간 : 02-01
02-01
1257
안녕하세요. 문의드립니다. 댓글+ 1개
시간 : 01-28
01-28
1256
맨위 이메일+전화번호 수정하는 페이지 문의 댓글+ 1개
시간 : 01-27
01-27
1255
테마 받았는데요 댓글+ 3개
시간 : 01-26
01-26
1254
페이지 설명 나온데로 했는데 안되네요? 댓글+ 1개
시간 : 01-24
01-24
1253
다국어 서브페이지 폰트 사이즈 등 조절 문의 댓글+ 2개
시간 : 01-21
01-21
1252
임시 저장 부분 댓글+ 4개
시간 : 01-09
01-09
1251
메인화면에 latest 여러개 설정시 1개만 적용됩니다. 댓글+ 1개
시간 : 12-31
12-31
1250
웹폰트 변경 댓글+ 1개
시간 : 12-30
12-30
1249
PHP 버전 관련 문의 댓글+ 2개
시간 : 12-26
12-26
1248
SNS 새로 바뀐 로고 폰트어썸 소스가 어떻게 되는지요? 댓글+ 1개
시간 : 12-23
12-23
1247
게시판에 글작성시 유튜브 영상 양쪽 검정 바탕이 안보이게 적절한 사이즈 조절 문의 댓글+ 2개
시간 : 12-20
12-20
1246
메가메뉴에서 목록에 구분선을 넣을 수 있을까요? 댓글+ 9개
시간 : 12-20
12-20
1245
메인배너 마우스 오버시에도 계속 롤링 진행되게 하고 싶습니다. 댓글+ 4개
시간 : 12-19
12-19
1244
게시판 페이지 상단에 타이틀을 넣고자 합니다. 댓글+ 3개
시간 : 12-18
12-18
1243
테마구매후 다운받은 테마파일 폴더에 라이선스 관련 2개 파일이 없습니다. 댓글+ 1개
시간 : 12-17
12-17
1242
서브배너 상단 이미지 교체하고 싶습니다 댓글+ 3개
시간 : 12-12
12-12
1241
메가메뉴에서 sns 아이콘이 모바일로 가면 이동하는데 이동하지 않게 할 수 있을까요? 댓글+ 5개
시간 : 12-10
12-10
1240
안녕하세요. :) 댓글+ 4개
시간 : 12-09
12-09

테마몰

테마몰

카테고리

카테고리
질문답변
 메뉴얼

라이브러리

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