티스토리 뷰

[이미지 슬라이드 jQuery] owlcarousel

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
cs

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>
cs

 

owlcarousel2.github.io/OwlCarousel2/demos/demos.html

 

Demos | Owl Carousel | 2.3.4

 

owlcarousel2.github.io

owlcarousel2.github.io/OwlCarousel2/

 

Home | Owl Carousel | 2.3.4

Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs

owlcarousel2.github.io

OwlCarousel2-2.3.4.zip
0.76MB

댓글