This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Horizontal Carousel

Add horizontal sliding carousels to your webpages

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC Horizontal Carousel CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/carousel_hor/css/dc_carousel_hor.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Horizontal Carousel JS -->
<script type="text/javascript" src="dcodes/carousel_hor/js/jquery.bxslider2.min.js"></script>
<script type="text/javascript" src="dcodes/carousel_hor/js/dc_jqcarousel.js"></script>
<!-- DC Elastislide CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/carousel_hor/css/elastislide.css" />
<!-- DC Elastislide JS -->
<script type="text/javascript" src="dcodes/carousel_hor/js/modernizr.custom.js"></script>
<script type="text/javascript" src="dcodes/carousel_hor/js/jquerypp.custom.js"></script>
<script type="text/javascript" src="dcodes/carousel_hor/js/jquery.elastislide.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- DC Horizontal Carousel CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/carousel_hor/css/dc_carousel_hor.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Horizontal Carousel JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_hor/js/jquery.bxslider2.min.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_hor/js/dc_jqcarousel.js"></script>
<!-- DC Elastislide CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/carousel_hor/css/elastislide.css" />
<!-- DC Elastislide JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_hor/js/modernizr.custom.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_hor/js/jquerypp.custom.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_hor/js/jquery.elastislide.js"></script>

ElastiSlide


View code:

?
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
<!-- DC Elastislide Horizontal Carousel Start -->
<div class="dc_es_container elastislide_hstyle" style="width:100%">
  <ul id="dc_es_carousel1" class="elastislide-list">
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
  </ul>
</div>
<!-- DC Elastislide Horizontal Carousel End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
<!-- DC Elastislide Carousel Settings -->
<script type="text/javascript">
             
            $( '#dc_es_carousel1' ).elastislide( {
                orientation : 'horizontal', // orientation 'horizontal' || 'vertical'
            speed : 500,    // sliding speed
            easing : 'ease-in-out', // sliding easing
            minItems : 3, // the minimum number of items to show.
            start : 0 // index of the current item (left most item of the carousel)
             
            } );
             
</script>

View code:

?
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
<!-- DC Elastislide Vertical Carousel Start -->
<div class="dc_es_container elastislide_vstyle">
  <ul id="dc_es_carousel2" class="elastislide-list">
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/666" /></a></li>
    <li><a href="#"><img src="http://cdn.dcodes.net/p/150x160/999" /></a></li>
  </ul>
</div>
<!-- DC Elastislide Vertical Carousel End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
<!-- DC Elastislide Carousel Settings -->
<script type="text/javascript">
             
            $( '#dc_es_carousel2' ).elastislide( {
                orientation : 'vertical', // orientation 'horizontal' || 'vertical'
            speed : 500,    // sliding speed
            easing : 'ease-in-out', // sliding easing
            minItems : 2, // the minimum number of items to show.
            start : 0 // index of the current item (left most item of the carousel)
             
            } );
             
</script>



bxSlide

  • Devotion

    Unparalleled

    In facilisis urna quis ante sollicitudin ut consequat lectus dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Integrity

    Inspired by vision

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum, justo in feugiat vulputate, ante ante commodo libero, ut dignissim urna est sit amet est. In lacinia ultricies lectus quis tempus.

  • Relentless

    Pursuit of perfection

    Cras facilisis euismod sapien, vitae ornare nunc vulputate ut. In ac nulla quis metus egestas imperdiet ac non lacus. Duis tincidunt, orci a dapibus lobortis, risus magna auctor velit.

  • Visionary

    Next generation

    Integer semper ultrices arcu, et porta dui condimentum vitae. Phasellus et urna ut lectus varius molestie at nec augue. Praesent at imperdiet quam. Ut posuere metus et orci auctor consectetur.

  • Devotion

    Unparalleled

    In facilisis urna quis ante sollicitudin ut consequat lectus dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Integrity

    Inspired by vision

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum, justo in feugiat vulputate, ante ante commodo libero, ut dignissim urna est sit amet est. In lacinia ultricies lectus quis tempus.

stop
1234

View code:

?
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
45
46
47
48
49
50
51
  <script type="text/javascript">
    $(function(){
    $('#bxslides1').bxSlider({
        prev_image: 'dcodes/carousel_hor/images/btn_arrow_left.jpg',
        next_image: 'dcodes/carousel_hor/images/btn_arrow_right.jpg',
        wrapper_class: 'bxslides1_wrap',
        margin: 70,
        auto: true,
        auto_controls: true
    });
});
</script>
  <div id="bxcontent">
    <div id="bxcontent_inner">
      <ul id="bxslides1">
        <li> <img src="http://cdn.dcodes.net/p/209x140" width="209" height="140" />
          <div class="bxcontent">
            <h3>Integrity</h3>
            <h4>Inspired by vision</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum, justo in feugiat vulputate, ante ante commodo libero, ut dignissim urna est sit amet est. In lacinia ultricies lectus quis tempus.</p>
          </div>
          <div class="clear"></div>
        </li>
        <li> <img src="http://cdn.dcodes.net/p/209x140" width="209" height="140" />
          <div class="bxcontent">
            <h3>Relentless</h3>
            <h4>Pursuit of perfection</h4>
            <p>Cras facilisis euismod sapien, vitae ornare nunc vulputate ut. In ac nulla quis metus egestas imperdiet ac non lacus. Duis tincidunt, orci a dapibus lobortis, risus magna auctor velit.</p>
          </div>
          <div class="clear"></div>
        </li>
        <li> <img src="http://cdn.dcodes.net/p/209x140" width="209" height="140" />
          <div class="bxcontent">
            <h3>Visionary</h3>
            <h4>Next generation</h4>
            <p>Integer semper ultrices arcu, et porta dui condimentum vitae. Phasellus et urna ut lectus varius molestie at nec augue. Praesent at imperdiet quam. Ut posuere metus et orci auctor consectetur.</p>
          </div>
          <div class="clear"></div>
        </li>
        <li> <img src="http://cdn.dcodes.net/p/209x140" width="209" height="140" />
          <div class="bxcontent">
            <h3>Devotion</h3>
            <h4>Unparalleled</h4>
            <p>In facilisis urna quis ante sollicitudin ut consequat lectus dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          </div>
          <div class="clear"></div>
        </li>
      </ul>
    </div>
  </div>
<div class="dc_clear"></div> <!-- line break/clear line -->

Light Carousel

  • Power

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Determination

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Belief

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Persistance

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Vision

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Focus

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Wisdom

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Opportunistic

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

View code:

?
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
45
46
47
<!-- DC Horizontal Carousel Settings -->
<script type="text/javascript">
  $(function() {jQuery('.dc_carousel_hor .carousel').jcarousel({scroll:1, wrap:'last',auto:3});});
  // auto: auto scroll in (seconds). Set to 0 to disable auto scroll
  // wrap: wrap carousel on last image. To disable auto return, set this to null.
</script>
<!-- DC Horizontal Carousel:Light Start -->
        <div class="dc_carousel_hor">
          <div class="l-carousel">
            <ul class="carousel">
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Power</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Determination</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Belief</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Persistance</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Vision</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Focus</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Wisdom</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Opportunistic</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
            </ul>
          </div>
                </div>
<!-- DC Horizontal Carousel:Light End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Dark Carousel


  • Power

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Determination

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Belief

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Persistance

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Vision

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Focus

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Wisdom

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

  • Opportunistic

    Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio.

View code:

?
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
45
46
47
<!-- DC Horizontal Carousel Settings -->
<script type="text/javascript">
  $(function() {jQuery('.dc_carousel_hor .carousel').jcarousel({scroll:1, wrap:'last',auto:3});});
  // auto: auto scroll in (seconds). Set to 0 to disable auto scroll
  // wrap: wrap carousel on last image. To disable auto return, set this to null.
</script>
<!-- DC Horizontal Carousel:Dark Start -->
        <div class="dc_carousel_hor">
          <div class="d-carousel">
            <ul class="carousel">
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Power</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Determination</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Belief</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Persistance</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Vision</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Focus</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Wisdom</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/175x115" width="175" height="115" border="0" /></a>
                <h4><a href="#">Opportunistic</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. </p>
              </li>
            </ul>
          </div>
                </div>
<!-- DC Horizontal Carousel:Dark End -->
<div class="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess