OwlCarousel2-支持触摸屏的响应式jQuery旋转木马插件 Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

jQuery之家 返回下载页
Basic Responsive Center Merge Auto Width Url Hash Nav Events Stage Padding rtl Lazyload Video Animate Autoplay Auto Height Mousewheel

Auto Width

1

2

3

4

6

7

8

9

10

11

12

13

14

15

Overview

在元素上设置宽度可以获取你想要的结果。如果要使用无限循环可以设置参数'items'大于1。它依赖于你的内容的宽度。

Setup

$('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,
    autoWidth:true,
    items:4
})

html

<div class="owl-carousel">
    <div class="item" style="width:250px"><h4>1</h4></div>
    <div class="item" style="width:100px"><h4>2</h4></div>
    <div class="item" style="width:500px"><h4>3</h4></div>
    <div class="item" style="width:100px"><h4>4</h4></div>
    <div class="item" style="width:50px"><h4>6</h4></div>
    <div class="item" style="width:250px"><h4>7</h4></div>
    <div class="item" style="width:120px"><h4>8</h4></div>
    <div class="item" style="width:420px"><h4>9</h4></div>
    <div class="item" style="width:120px"><h4>10</h4></div>
    <div class="item" style="width:300px"><h4>11</h4></div>
    <div class="item" style="width:450px"><h4>12</h4></div>
    <div class="item" style="width:220px"><h4>13</h4></div>
    <div class="item" style="width:150px"><h4>14</h4></div>
    <div class="item" style="width:600px"><h4>15</h4></div>
</div>