Vertical Carousel

Add vertical sliding carousels to your webpages

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


<!-- DC Vertical Carousel CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/carousel_ver/css/tsc_carousel_ver.css" />

<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

<!-- DC Vertical Carousel JS -->
<script type="text/javascript" src="dreamcodes/carousel_ver/js/tsc_jqcarousel.js"></script>
<script type="text/javascript" src="dreamcodes/carousel_ver/js/tsc_carousel_ver.js"></script>

          

Light Version

View code:


<!-- DC Vertical Carousel Start -->
      <div class="tsc_carousel_ver">
        <div class="cv_news"> 
          <div class="cv_newslist">
            <ul>
              <li> <a href="#"><img src="http://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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="tsc_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="tsc_clr"></div>
        </div>
      </div>
<!-- DC Vertical Carousel End -->      
<div class="tsc_clear"></div> <!-- line break/clear line -->

          


© TemplateAccess