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!
(즐거웅코드) owl-carousel 슬라이드 구현하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 7. 13. 23:00

반응형

[즐거'웅'코드] 목차

  1. 리소스
  2. 예제 소스
  3. 구현 예시
리소스
리소스.zip
14.2 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
35
36
 
<link rel="stylesheet" type="text/css" href="/css/owl.carousel.min.css"/>
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
 
<div class="owl-carousel owl-theme">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
</div>
 
<script>
    $(".owl-carousel").owlCarousel({
        items: 2,
        margin: 20,
        center: true,
        loop: true,
        dots: true,
        autoplay: true,
        autoplayTimeout: 2000,
        autoplayHoverPause: true,
        rewind: false,
        mouseDrag: true,
        touchDrag: true
    });
</script>
구현 예시
반응형
저작자표시

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

(즐거웅코드) swiper 슬라이드 이전 슬라이드로 이동시키기  (0) 2021.07.15
(즐거웅코드) swiper 슬라이드 구현하기  (0) 2021.07.14
(즐거웅코드) slick 슬라이드 구현하기  (0) 2021.07.12
(즐거웅코드) clipboard.js로 복사하기 (모바일 복사 가능)  (0) 2021.07.11
(즐거웅코드) datepicker.js로 달력으로 날짜 입력하기  (0) 2021.07.10

관련글

댓글 0

티스토리툴바