Loading

Slider with info panel

Slider displays additional info boxes, on hover you have the option to read more or book/purchase item. Performed with CSS3, JQuery, and Tiny Scrollbar.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Slider with info panel</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="spacer"></div>

<div id="roomswrapper">
	<div id="pagelinksbtm"></div>

  <div id="scrollbar1">
		<a name="roomsscroll"></a> 
		<div class="scrollbar" style="width: 1054px;">
			<div class="track" style="width: 1054px;">
				<div class="thumb" style="left: 0px; width: 20px;">
					<div class="end"></div>
				</div>
			</div>
		</div>

  <div class="viewport">
    <div class="overview" style="left: 0px;">
      <div style="display:block; width:3856px; height:50px; background-color:#ffffff;">

      <div class="room1bx roombx">
      <p class="roomsbxp"><span><br>Sample display 1</span></p>
      <a target="_blank">
      <div class="booknow"><span>Book Now</span></div></a>

      <a class="more"><div class="readmore"><span>Read More</span></div></a>

  <div class="roominfo room1">
    <a href="#roomsscroll" class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
		
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    <div class="bxsubhead">
    <p>Sample display 1</p>
    </div>
	</div>

	<div class="room1bg roombxbg" style="display: block;"></div></div>

	<div class="room2bx roombx">
	<p class="roomsbxp"><span><br>Sample display 2</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a class="more"><div class="readmore"><span>Read More</span></div></a>

	<div class="roominfo room2">
		<a href="#roomsscroll" class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<div class="bxsubhead">
<p>Sample display 2</p></div>
	</div>

<div class="room2bg roombxbg" style="display: block;"></div></div>

	<div class="room3bx roombx">
	<p class="roomsbxp"><span><br>Sample display 3</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a href="#roomsscroll" class="more"><div class="readmore"><span>Read More</span></div></a>
	<div class="roominfo room3">
		<a class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<div class="bxsubhead">
<p>Sample display 3</p></div>
	</div>
<div class="room3bg roombxbg" style="display: block;"></div></div>

<div class="room4bx roombx">
	<p class="roomsbxp"><span><br>Sample display 4</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a href="#roomsscroll" class="more"><div class="readmore"><span>Read More</span></div></a>
	<div class="roominfo room4">
		<a class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<div class="bxsubhead">
<p>Sample display 4</p></div>
	</div>
	<div class="room4bg roombxbg" style="display: block;"></div></div>

	<div class="room5bx roombx">
	<p class="roomsbxp"><span><br>Sample display 5</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a href="#roomsscroll" class="more"><div class="readmore"><span>Read More</span></div></a>
	<div class="roominfo room5">
		<a class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<div class="bxsubhead">
<p>Sample display 5</p></div>
	</div>
<div class="room5bg roombxbg" style="display: block;"></div></div>

<div class="room7bx roombx">
	<p class="roomsbxp"><span><br>Sample display 6</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a href="#roomsscroll" class="more"><div class="readmore"><span>Read More</span></div></a>
	<div class="roominfo room7">
		<a href="#roomsscroll" class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. </p>
<div class="bxsubhead">
<p>Sample display 6</p></div>
	</div>
	<div class="room7bg roombxbg" style="display: block;"></div></div>

	<div class="room6bx roombx">
	<p class="roomsbxp"><span><br>Sample display 7</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a class="more"><div class="readmore"><span>Read More</span></div></a>
	<div class="roominfo room6">
		<a class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<div class="bxsubhead">
<p>Sample display 7</p></div>
	</div>
<div class="room6bg roombxbg" style="display: block;"></div></div>


<div class="room8bx roombx">
	<p class="roomsbxp"><span><br>Sample display 8</span></p>
	<a target="_blank"><div class="booknow"><span>Book Now</span></div></a>
	<a class="more"><div class="readmore"><span>Read More</span></div></a>
	<div class="roominfo room8">
		<a class="less"><img src="http://andrewjtullio.com/codepen/xbtn.png"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<div class="bxsubhead">
<p>Sample display 8</p></div>
	</div>
<div class="room8bg roombxbg" style="display: block;"></div></div>

</div>
  </div>
		</div>
	</div>

</div>
  
    <script src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

body {
  font-family: 'Lato';
}
p {
  line-height:1.5;
  font-family: 'Lato';
}
.bxsubhead p {
  line-height:.65;
}
.spacer {
  diplay:block;
  height:75px;
  width:100%;
}
div#roomswrapper h2 {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 30px;
  color: #3f4a5b;
}
.room1bx {
  width: 482px;
  height: 422px; 
  overflow: hidden; 
  position: relative;
  background-color: #00b5e0;
  float: left;
}
.room1bg {
  width: 482px;
  height: 422px;
  background: url(http://andrewjtullio.com/codepen/slider-01.jpg);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.room2bx {
  width: 482px;
  height: 422px;
  overflow: hidden;
  position: relative;
  background-color: #00b5e0; float: left;}
.room2bg {
  width: 482px;
  height: 422px;
  background: url(http://andrewjtullio.com/codepen/slider-02.jpg); 
  background-repeat: no-repeat;
  position: absolute; top: 0; 
  left: 0;
  z-index: 5;
}
.room3bx {
  width: 482px; 
  height: 422px; 
  overflow: hidden; position: relative; 
  background-color: #00b5e0;
  float: left;
}
.room3bg {
  width: 482px;
  height: 422px;
  background: url(http://andrewjtullio.com/codepen/slider-03.jpg);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.room4bx {
  width: 482px;
  height: 422px;
  overflow: hidden; 
  position: relative; 
  background-color: #00b5e0; 
  float: left;
}
.room4bg {width: 482px; 
  height: 422px;
  background: url(http://andrewjtullio.com/codepen/slider-04.jpg);
  background-repeat: no-repeat;
  position: absolute; 
  top: 0; left: 0; 
  z-index: 5;
}

.room5bx {
  width: 482px;
  height: 422px;
  overflow: hidden;
  position: relative;
  background-color: #00b5e0;
  float: left;
}
.room5bg {
  width: 482px; 
  height: 422px; 
  background: url(http://andrewjtullio.com/codepen/slider-05.jpg);
  background-repeat: no-repeat;
  position: absolute;
  top: 0; left: 0;
  z-index: 5;
}

.room6bx {
  
  
  width: 482px; 
  height: 422px; 
  overflow: hidden; position: relative; 
  background-color: #00b5e0; 
  float: left;
}
.room6bg {
  width: 482px;
  height: 422px; 
  background: url(http://andrewjtullio.com/codepen/slider-06.jpg); background-repeat: no-repeat; 
  position: absolute; 
  top: 0; left: 0; 
  z-index: 5;
}
.room7bx {
  width: 482px; 
  height: 422px;
  overflow: hidden; position: relative; 
  background-color: #00b5e0;
  float: left;
}
.room7bg {width: 482px;
  height: 422px;
  background: url(http://andrewjtullio.com/codepen/slider-07.jpg); 
  background-repeat: no-repeat;
  position: absolute; 
  top: 0; 
  left: 0;
  z-index: 5;
}

.room8bx {
  width: 482px;
  height: 422px;
  overflow: hidden; position: relative;
  background-color: #00b5e0;
  float: left;
}
.room8bg {width: 482px;
  height: 422px;
  background: url(http://andrewjtullio.com/codepen/slider-08.jpg); background-repeat: no-repeat;
  position: absolute;
  top: 0; left: 0;
  z-index: 5;
}

.booknow {
  width: 161px; 
  height: 60px;
  background: url(http://andrewjtullio.com/codepen/booknowroll.gif); 
  background-repeat: no-repeat;
  background-position: 0 0; z-index: 3; 
  margin-top: 139px; 
  margin-left: 67px; 
  float: left; 
  cursor: pointer;
}
.booknow:hover {
  background-position: 0 -60px;
  z-index: 10;
}
.booknow span {
  display: none;
}
.readmore {
  
  width: 161px; 
  height: 60px;
  background: url(http://andrewjtullio.com/codepen/readmoreroll.gif); 
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 3; 
  margin-top: 139px; 
  margin-left: 25px; 
  float: left; 
  cursor: pointer;
}
.readmore:hover {
  background-position: 0 -60px; 
  z-index: 10;
}
.readmore span {
  display: none;
}
p.roomsbxp {
  clear: both;
  color: #ffffff;
  text-align: center; 
  margin-top: 342px;
  z-index: 6; 
  position: absolute; width: 482px;
}
p.roomsbxp span {
  text-transform: uppercase;
  font-weight: bold;
}
#roomsrotate h2 {
  font-family: 'Lato', sans-serif;
  color: #40485b
}
div.roominfo { 
  display: none; 
  background-color: #e8763d; position: absolute; 
  height: 352px; 
  z-index: 20;
  bottom: 0; padding: 35px; 
  color: #ffffff; 
  text-align: justify;
  line-height: 1.25;
}
div.roominfo strong {
  font-size: 19px;
}
a.less {
  float: right;
  position: relative; 
  top: -20px; 
  cursor:pointer;
}
div.bxsubhead {
width: 483px; 
height: 100px; 
display: block; background-color: #00b5e0; 
position: absolute; 
bottom: 0; left: 0; 
color: #ffffff
}
div.bxsubhead p {
  font-weight: bold; 
  text-align: center; padding-top: 35px; 
  text-transform: uppercase;
}
#scrollbar1 {
  width:100%;
  margin:0 0 10px
}
#scrollbar1 .viewport {
  width:100%; 
  height:422px; 
  overflow:hidden; 
  position:relative;
}
#scrollbar1 .overview { 
  list-style:none; 
  width:1416px; padding:0; 
  margin:0; 
  position:absolute; 
  left:0;
  top:0;
}
#scrollbar1 .scrollbar {
  background:transparent url(http://andrewjtullio.com/codepen/bg-scrollbar-track-x.png) no-repeat 0 0; 
  position:relative; 
  margin:0 auto; clear:both; 
  height:15px; 
  width: 1153px !important;
  padding-bottom: 40px 
}
#scrollbar1 .thumb {
  background:transparent url(http://andrewjtullio.com/codepen/slider.png) no-repeat 100% 100%; 
  height:36px; 
  width: 119px !important; cursor:pointer; 
  overflow:hidden;
  position:absolute; left:-60px; 
  top:-16px
}
#scrollbar1 .thumb .end { background:transparent url(http://andrewjtullio.com/codepen/slider.png) no-repeat 0 50%; 
  overflow:hidden; 
  height:119px; 
  width:36px
}
#scrollbar1 .disable {
  display:none;
}
/* Downloaded from https://ahoj.co.uk/ */
$('.roombx').hover(function(){
		$(this).find('.roombxbg').fadeOut('fast');
	},
	function(){
		$(this).find('.roombxbg').fadeIn('fast');
	});

	$('.less').on('click', function(e){
		e.preventDefault();
		$(this).parents('.roominfo').fadeOut();
	});

	$('.more').on('click', function(e){
		e.preventDefault();
		$(this).parents('.roombx').find('.roominfo').fadeIn();
	});

/*
 * Sliding function below modified from Tiny Scrollbar
 * http://www.baijs.nl/tinyscrollbar/
 */

;( function( $ ) 
{
    $.tiny = $.tiny || { };

    $.tiny.scrollbar = {
        options: {
                axis         : 'x'    // vertical or horizontal scrollbar? ( x || y ).
            ,   wheel        : 40     // how many pixels must the mouswheel scroll at a time.
            ,   scroll       : true   // enable or disable the mousewheel.
            ,   lockscroll   : true   // return scrollwheel to browser if there is no more content.
            ,   size         : '1054' // set the size of the scrollbar to auto or a fixed number.
            ,   sizethumb    : 20 // set the size of the thumb to auto or a fixed number.
            ,   invertscroll : false  // Enable mobile invert style scrolling
        }
    };

    $.fn.tinyscrollbar = function( params )
    {
        var options = $.extend( {}, $.tiny.scrollbar.options, params );
        
        this.each( function()
        { 
            $( this ).data('tsb', new Scrollbar( $( this ), options ) ); 
        });

        return this;
    };

    $.fn.tinyscrollbar_update = function(sScroll)
    {
        return $( this ).data( 'tsb' ).update( sScroll ); 
    };

    function Scrollbar( root, options )
    {
        var oSelf       = this
        ,   oWrapper    = root
        ,   oViewport   = { obj: $( '.viewport', root ) }
        ,   oContent    = { obj: $( '.overview', root ) }
        ,   oScrollbar  = { obj: $( '.scrollbar', root ) }
        ,   oTrack      = { obj: $( '.track', oScrollbar.obj ) }
        ,   oThumb      = { obj: $( '.thumb', oScrollbar.obj ) }
        ,   sAxis       = options.axis === 'x'
        ,   sDirection  = sAxis ? 'left' : 'top'
        ,   sSize       = sAxis ? 'Width' : 'Height'
        ,   iScroll     = 0
        ,   iPosition   = { start: 0, now: 0 }
        ,   iMouse      = {}
        ,   touchEvents = 'ontouchstart' in document.documentElement
        ;

        function initialize()
        {
            oSelf.update();
            setEvents();

            return oSelf;
        }

        this.update = function( sScroll )
        {
            oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ];
            oContent[ options.axis ]  = oContent.obj[0][ 'scroll'+ sSize ];
            oContent.ratio            = oViewport[ options.axis ] / oContent[ options.axis ];

            oScrollbar.obj.toggleClass( 'disable', oContent.ratio >= 1 );

            oTrack[ options.axis ] = options.size === 'auto' ? oViewport[ options.axis ] : options.size;
            oThumb[ options.axis ] = Math.min( oTrack[ options.axis ], Math.max( 0, ( options.sizethumb === 'auto' ? ( oTrack[ options.axis ] * oContent.ratio ) : options.sizethumb ) ) );
        
            oScrollbar.ratio = options.sizethumb === 'auto' ? ( oContent[ options.axis ] / oTrack[ options.axis ] ) : ( oContent[ options.axis ] - oViewport[ options.axis ] ) / ( oTrack[ options.axis ] - oThumb[ options.axis ] );
            
            iScroll = ( sScroll === 'relative' && oContent.ratio <= 1 ) ? Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll )) : 0;
            iScroll = ( sScroll === 'bottom' && oContent.ratio <= 1 ) ? ( oContent[ options.axis ] - oViewport[ options.axis ] ) : isNaN( parseInt( sScroll, 10 ) ) ? iScroll : parseInt( sScroll, 10 );
            
            setSize();
        };

        function setSize()
        {
            var sCssSize = sSize.toLowerCase();

            oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
            oContent.obj.css( sDirection, -iScroll );
            iMouse.start = oThumb.obj.offset()[ sDirection ];

            oScrollbar.obj.css( sCssSize, oTrack[ options.axis ] );
            oTrack.obj.css( sCssSize, oTrack[ options.axis ] );
            oThumb.obj.css( sCssSize, oThumb[ options.axis ] );
        }

        function setEvents()
        {
            if( ! touchEvents )
            {
                oThumb.obj.bind( 'mousedown', start );
                oTrack.obj.bind( 'mouseup', drag );
            }
            else
            {
                oViewport.obj[0].ontouchstart = function( event )
                {   
                    if( 1 === event.touches.length )
                    {
                        start( event.touches[ 0 ] );
                        event.stopPropagation();
                    }
                };
            }

            if( options.scroll && window.addEventListener )
            {
                oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
                oWrapper[0].addEventListener( 'mousewheel', wheel, false );
                oWrapper[0].addEventListener( 'MozMousePixelScroll', function( event ){
                    event.preventDefault();
                }, false);
            }
            else if( options.scroll )
            {
                oWrapper[0].onmousewheel = wheel;
            }
        }

        function start( event )
        {
            $( "body" ).addClass( "noSelect" );

            var oThumbDir   = parseInt( oThumb.obj.css( sDirection ), 10 );
            iMouse.start    = sAxis ? event.pageX : event.pageY;
            iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
            
            if( ! touchEvents )
            {
                $( document ).bind( 'mousemove', drag );
                $( document ).bind( 'mouseup', end );
                oThumb.obj.bind( 'mouseup', end );
            }
            else
            {
                document.ontouchmove = function( event )
                {
                    event.preventDefault();
                    drag( event.touches[ 0 ] );
                };
                document.ontouchend = end;        
            }
        }

        function wheel( event )
        {
            if( oContent.ratio < 1 )
            {
                var oEvent = event || window.event
                ,   iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3
                ;

                iScroll -= iDelta * options.wheel;
                iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll ));

                oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio );
                oContent.obj.css( sDirection, -iScroll );

                if( options.lockscroll || ( iScroll !== ( oContent[ options.axis ] - oViewport[ options.axis ] ) && iScroll !== 0 ) )
                {
                    oEvent = $.event.fix( oEvent );
                    oEvent.preventDefault();
                }
            }
        }

        function drag( event )
        {
            if( oContent.ratio < 1 )
            {
                if( options.invertscroll && touchEvents )
                {
                    iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
                }
                else
                {
                     iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
                }

                iScroll = iPosition.now * oScrollbar.ratio;
                oContent.obj.css( sDirection, -iScroll );
                oThumb.obj.css( sDirection, iPosition.now );
            }
        }
        
        function end()
        {
            $( "body" ).removeClass( "noSelect" );
            $( document ).unbind( 'mousemove', drag );
            $( document ).unbind( 'mouseup', end );
            oThumb.obj.unbind( 'mouseup', end );
            document.ontouchmove = document.ontouchend = null;
        }

        return initialize();
    }

}(jQuery));


$('#scrollbar1').tinyscrollbar({ axis: "x", scroll: true});

This awesome code is write by Drew, you can se more from this user in the personal repository