I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) slick 슬라이드 구현하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 7. 12. 17:18

반응형

[즐거'웅'코드] 목차

  1. 리소스
  2. 예제 소스
  3. 구현 예시
리소스

리소스.zip
12.5 kB

 

예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<link rel="stylesheet" type="text/css" href="/css/slick.css"/>
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript" src="/js/slick.min.js"></script>
 
<div class="autoplay">
    <div>
        <h3>1</h3>
    </div>
    <div>
        <h3>2</h3>
    </div>
    <div>
        <h3>3</h3>
    </div>
    <div>
        <h3>4</h3>
    </div>
    <div>
        <h3>5</h3>
    </div>
</div>
 
<script>
    $('.autoplay').slick({
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        pauseOnHover: true
    });
</script>

 

구현 예시

 

 
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) swiper 슬라이드 구현하기  (0) 2021.07.14
(즐거웅코드) owl-carousel 슬라이드 구현하기  (0) 2021.07.13
(즐거웅코드) clipboard.js로 복사하기 (모바일 복사 가능)  (0) 2021.07.11
(즐거웅코드) datepicker.js로 달력으로 날짜 입력하기  (0) 2021.07.10
(즐거웅코드) odometer.js로 카운트 증가시키기  (0) 2021.07.09

관련글

댓글 0

티스토리툴바