상세 컨텐츠

본문 제목

[Slide Slick] 02. 슬라이더 컨트롤러 이전 다음 버튼 html문서에 재정의

JQuery Plug in

by kwanghyup 2021. 10. 26. 11:12

본문

1. html 

<div class="continaer">
    <div class="visual">
        <div><img src="img/visual_bg.jpg" alt=""></div>
        <div><img src="img/visual_bg2.jpg" alt=""></div>
        <div><img src="img/visual_bg3.jpg" alt=""></div>
        
    </div>
    <!-- 슬라이드 컨트롤러 재정의 -->
    <div class="arrows_box">
        <span class="prev_arrow">이전</span>
        <span class="next_arrow">다음</span>
    </div>
</div>

arrows_box, prev_arrow, next_arrow 등 클래스명은 임의의 값이다. 

 

2. script

$('.visual').slick({
    autoplay : true, 
    autoplaySpeed : 1000, 
    prevArrow : $('.prev_arrow'),
    nextArrow : $('.next_arrow')
});

 

관련글 더보기

댓글 영역