Carousel

HTML

<div class="js-slider">
<ul class="js-slider-tabs">
   <li class="active"><a href="" data-to-move=""></a></li>
   <li><a href="" data-to-move=""></a></li>
   <li><a href="" data-to-move=""></a></li>
   <li><a href="" data-to-move=""></a></li>
</ul>
<div class="clear"></div>
<br />
<div class="js-slider-container" data-paused="">
   <ul class="js-slider-wrap">
      <div id="js-to-move" style="position: relative;">
         <li>
            <a href="#">
            <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="160" height="100" alt="" />
            <span class="description">1</span>
            </a>
         </li>
         <li>
            <a href="#">
            <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="160" height="100" alt="" />
            <span class="description">2</span>
            </a>
         </li>
         <li>
            <a href="#">
            <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="160" height="100" alt="" />
            <span class="description">3</span>
            </a>
         </li>
         <li>
            <a href="#">
            <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="160" height="100" alt="" />
            <span class="description">4</span>
            </a>
         </li>
         <li>
            <a href="#">
            <img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="160" height="100" alt="" />
            <span class="description">5</span>
            </a>
         </li>
         <li>
            <a href="#">
            <img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="160" height="100" alt="" />
            <span class="description">6</span>
            </a>
         </li>
         <li>
            <a href="#">
            <img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="160" height="100" alt="" />
            <span...

CSS

html {
    padding: 20px;
}
.right {
    float: right;
}
.clear {
    clear: both;
}
/* Tabs */
.js-slider-tabs ul {
    list-type: none;
}
.js-slider-tabs li {
    float: left;
    color: #fff;
    display: inline-block;
    position: relative;
    margin-right: 5px;
}
.js-slider-tabs a {
    background: transparent url(//c14999839.r39.cf2.rackcdn.com/switcher.png) no-repeat 0 0;
    float: left;
    height: 11px;
    overflow: hidden;
    text-indent: -9999px;
    width: 11px;
}
.js-slider-tabs .active a,
.js-slider-tabs a:hover {
    background-position: -15px 0;
}

/* Container */
.js-slider-container {
    position: relative;
    overflow: hidden;
    width: 660px;
}
.js-slider-container li {
    float: left;
}
.js-slider-wrap {
    width: 9999px;
    height: 100px;
}
.js-slider-container a {
    float: left;
position: relative;
width: 160px;
height: 100px;
    overflow: hidden;
margin-right: 10px;
}
.description {
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: absolute;
bottom: 0;
left: 0;
font-size: 13px;
font-weight: bold;
padding: 5px 8px;
width: 160px;
display: block;
}

JavaScript

(function($) {
    var methods = {
        init: function(options) {
            var settings = $.extend({
                'speed': '1000',
                'interval': '1000',
                'auto': 'on'
            }, options);

            return this.each(function() {
                var $wrapper = $(this);
                var $sliderContainer = $wrapper.find('.js-slider-container');
                $sliderContainer.hide().fadeIn();

                var $tabs = $wrapper.find('.js-slider-tabs li a');
                var numTabs = $tabs.size();
                var innerWidth = $wrapper.find('.js-slider-container').width();

                var $elements = $wrapper.find('.js-slider-container a');
                var $firstElement = $elements.first();
                var containerHeight = $firstElement.height();
                $sliderContainer.height(containerHeight);

                // Loop through each list element in `.js-slider-tabs` and add the
                // distance to move for each "panel". A panel in this example is 4 images
                $tabs.each(function(i) {
                    // Set amount to scroll for each tab
                    if (i === 1) {
                        $(this).attr('data-to-move', innerWidth + 20); // 20 is the padding between elements
                    } else {
                        $(this).attr('data-to-move', innerWidth * (i) + (i * 20));
                    }

                });

                // If they hovered on the panel, add paused to the data attribute
                $('.js-slider-container').hover(function() {
                    $sliderContainer.attr('data-paused', true);
                }, function() {
                    $sliderContainer.attr('data-paused', false);
                });

                // Start the auto slide
                if (settings.auto === 'on') {
                    methods.auto($tabs, settings, $sliderContainer);
                }

                $tabs.click(function() {
   ...