• مثال ها / Shortcodes 1 / Carousel

Carousel

Carousel Shortcodes

Porto includes the responsive and powerfull jquery plugin Owl Carousel2.

Default

HTML Shortcode 

 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
 
<div class="owl-carousel stage-margin" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-5.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-6.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-7.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-4.jpg" />
    </div>
</div>

Show Navigation on Hover

HTML Shortcode 

 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
39
40
41
42
43
44
 
<div class="owl-carousel show-nav-hover" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}">
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-4.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-4.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-5.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-6.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-7.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
</div>

Navigation on Title

HTML Shortcode 

 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
 
<div class="owl-carousel show-nav-title" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}">
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-4.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-5.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-6.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-7.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
</div>

Basic

Animation (FadeOut)

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div class="row">
    <div class="col-md-6">
        <h4>Basic</h4>
        <div class="owl-carousel" data-plugin-options="{'items': 1}">
            <div>
                <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
            </div>
            <div>
                <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <h4>Animation (FadeOut)</h4>
        <div class="owl-carousel" data-plugin-options="{'items': 1, 'animateOut': 'fadeOut'}">
            <div>
                <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
            </div>
            <div>
                <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
            </div>
        </div>
    </div>
</div>

Center

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
<div class="owl-carousel" data-plugin-options="{'autoHeight': true, 'center': true, 'margin': 10}">
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-4.jpg" />
    </div>
</div>

Max Items for Each Resolution

HTML Shortcode 

 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
 
<div class="owl-carousel" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'loop': false, 'autoHeight': true, 'margin': 10}">
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-5.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-6.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-7.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-3.jpg" />
    </div>
    <div>
        <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-4.jpg" />
    </div>
</div>

Multiple Items

HTML Shortcode 

 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': 4}">
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
</div>

Auto Play

HTML Shortcode 

 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': 4, 'autoplay': true, 'autoplayTimeout': 3000}">
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
</div>

Rounded Navigation

HTML Shortcode 

 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 stage-margin rounded-nav" data-plugin-options="{'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
</div>

Navigation Bottom

HTML Shortcode 

 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 nav-bottom" data-plugin-options="{'loop': false, 'nav': true, 'dots': false}">
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
</div>

Navigation Bottom Rounded

HTML Shortcode 

 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 nav-bottom rounded-nav" data-plugin-options="{'loop': false, 'nav': true, 'dots': false}">
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-5.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-4.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-3.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-2.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-1.png" />
    </div>
    <div>
        <img alt="" class="img-responsive" src="/portals/2/img/logos/logo-6.png" />
    </div>
</div>

Inside Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis. Consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
 
<div class="row">
    <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
        <div class="owl-carousel nav-inside pull-left mr-lg mb-sm" style="width: 250px;" data-plugin-options="{'items': 1, 'margin': 10, 'animateOut': 'fadeOut'}">
            <div>
                <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-1.jpg" />
            </div>
            <div>
                <img alt="" class="img-responsive img-rounded" src="/portals/2/img/projects/project-2.jpg" />
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis. Consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
    </div>
</div>