Horizontal Carousel

Add horizontal sliding carousels to your webpages

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


<!-- DC Horizontal Carousel CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/carousel_hor/css/tsc_carousel_hor.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 Horizontal Carousel JS -->
<script type="text/javascript" src="dreamcodes/carousel_hor/js/jquery.bxslider2.min.js"></script>
<script type="text/javascript" src="dreamcodes/carousel_hor/js/tsc_jqcarousel.js"></script>

<!-- DC Horizontal Carousel Settings -->
<script type="text/javascript">
  $(function() {jQuery('.tsc_carousel_hor .carousel').jcarousel({scroll:1});});
</script>

          

bxSlide

  • 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.

View code:


  <script type="text/javascript">
	$(function(){
	$('#bxslides1').bxSlider({
		prev_image: 'dreamcodes/carousel_hor/images/btn_arrow_left.jpg',
		next_image: 'dreamcodes/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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="tsc_clear"></div> <!-- line break/clear line -->

          

Light Carousel

View code:


<!-- DC Horizontal Carousel:Light Start -->
        <div class="tsc_carousel_hor">
          <div class="l-carousel">
            <ul class="carousel">
              <li> <a href="#"><img src="http://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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>
<!-- DC Horizontal Carousel:Light End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          

Dark Carousel


View code:


<!-- DC Horizontal Carousel:Dark Start -->
        <div class="tsc_carousel_hor">
          <div class="d-carousel">
            <ul class="carousel">
              <li> <a href="#"><img src="http://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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://pimg.co/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>
<!-- DC Horizontal Carousel:Dark End -->
<div class="tsc_clear"></div> <!-- line break/clear line -->

          


© TemplateAccess