Carousel

Carousel

Tucson includes the responsive and powerfull jquery plugin Owl Carousel.

1
2
3
4
5
6
7
8
 
<div class="owl-carousel" data-plugin-options="{'items': 1, 'autoHeight': true}">
    <div>
        <img alt="" class="img-responsive img-rounded" src="/Portals/tucson/img/projects/project-detail-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/Portals/tucson/img/projects/project-detail-2.jpg" />
    </div>
</div>

 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
37
38
 
<div class="owl-carousel" data-plugin-options="{'items': 3, 'singleItem': false, 'autoPlay': true}">
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-6.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/Portals/tucson/img/logos/logo-6.png" />
    </div>
</div>

 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
37
38
 
<div class="owl-carousel" data-plugin-options="{'items': 3, 'singleItem': false, 'autoPlay': true}">
    <div>
        <img class="img-responsive" src="img/logos/logo-1.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-2.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-3.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-4.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-5.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-6.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-5.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-4.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-3.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-2.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-1.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-6.png" alt="">
    </div>
</div>

 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
37
38
 
<div class="owl-carousel" data-plugin-options="{'items': 3, 'singleItem': false, 'navigation': true, 'pagination': false}">
    <div>
        <img class="img-responsive" src="img/logos/logo-1.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-2.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-3.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-4.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-5.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-6.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-5.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-4.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-3.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-2.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-1.png" alt="">
    </div>
    <div>
        <img class="img-responsive" src="img/logos/logo-6.png" alt="">
    </div>
</div>