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

Vertical Carousel

Add vertical sliding carousels to your webpages

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

?
1
2
3
4
5
6
7
<!-- DC Vertical Carousel CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/carousel_ver/css/dc_carousel_ver.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 Vertical Carousel JS -->
<script type="text/javascript" src="dcodes/carousel_ver/js/dc_jqcarousel.js"></script>
<script type="text/javascript" src="dcodes/carousel_ver/js/dc_carousel_ver.js"></script>

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

?
1
2
3
4
5
6
7
<!-- DC Vertical Carousel CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/carousel_ver/css/dc_carousel_ver.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 Vertical Carousel JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_ver/js/dc_jqcarousel.js"></script>
<script type="text/javascript" src="http://cdn.dcodes.net/2/carousel_ver/js/dc_carousel_ver.js"></script>

Light Version

  • Visionary

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Peaceful

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Power

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Determination

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Integrity

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Destiny

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Persistance

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Freedom

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Independence

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

  • Law

    Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.

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
52
53
54
<!-- DC Vertical Carousel Start -->
      <div class="dc_carousel_ver">
        <div class="cv_news">
          <div class="cv_newslist">
            <ul>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Visionary</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Peaceful</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Power</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Determination</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Integrity</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Destiny</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Persistance</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Freedom</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Independence</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
              <li> <a href="#"><img src="http://cdn.dcodes.net/p/140x92" width="140" height="92" border="0" class="jc_left" /></a>
                <h4 class="title"><a href="#">Law</a></h4>
                <p>Suspendisse malesuada diam quis enim dictum nec gravida nisl gravida. Quisque lobortis gravida elit ac dapibus. Ut felis lorem, tris tique ac cursus vitae, pretium ac est.</p>
              </li>
            </ul>
          </div>
          <div class="dc_clr"></div>
          <div class="cv_scroll"> <a href="#" class="cv_newslist-prev jbutton"></a> <a href="#" class="cv_newslist-next jbutton"></a> </div>
          <div class="dc_clr"></div>
        </div>
      </div>
<!-- DC Vertical Carousel End -->     
<div class="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess