How to create a Tiny horizontal scroll bar to display images inline one by one?

Question

I am using Tiny Scrollbar Plugin to make a tiny horizontal scrollbar to display a bunch of images inside a div in a non breaking single in reduced window size of 768 px with the help of Media Queries . When I run the above code and reduce my window size to 768 px, I got my images displaying in a single line but unfortunately i not getting any horizontal scrollbar to scroll images. I don't know where i'm doing wrong. Can anyone tell how to get a tiny horizontal scroll bar

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tinyscrollbar.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#scrollbar1').tinyscrollbar({ axis: 'y' });
        });
    </script>
    <style>
        .overview
        {
            white-space: nowrap;
        }
        #scrollbar1
        {
            width: 100%;
            margin: 20px 0 10px;
        }
        #scrollbar1 .viewport
        {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        #scrollbar1 .overview
        {
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            padding: 0;
            margin: 0;
            width: 100%;
        }
        #scrollbar1 .scrollbar
        {
            position: relative;
            background-position: 0 0;
            float: right;
            width: 15px;
        }
        #scrollbar1 .track
        {
            background: height: 100%;
            width: 15px;
            position: relative;
        }
        #scrollbar1 .thumb
        {
            background-color: #e0d8b8;
            border-radius: 4px;
            height: 20px;
            width: 8px;
            cursor: pointer;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: -5px;
        }
        #scrollbar1 .thumb .end
        {
            background-color: #e0d8b8;
            border-radius: 4px;
            overflow: hidden;
            height: 20px;
            width: 8px;
        }
        #scrollbar1 .disable
        {
            display: none;
        }


        @media screen and (max-width: 768px)
        {
            .overview 
            {
                white-space: nowrap;
                display: inline;
            }
        }

    </style>
</head>
<body>    
    <div id="scrollbar1">
        <div class="scrollbar">
            <div class="track">
                <div class="thumb">
                    <div class="end">
                    </div>
                </div>
            </div>
        </div>
        <div class="viewport">
            <div class="overview">
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
                <img src="Comic.jpg" alt="" />
            </div>
        </div>
    </div>    
</body>
</html>

score 0 · Answer 1 · answered Feb 01 '14 at 21:44

I would suggest switching to bxslider, if you don't mind.

Here is a simple example. (Ignore white borders around the images). You should look at the options page, this slider is highly configurable.

The only disadventage for you is lack of horizontal scrolling bar. But the slider is fully responsive, so there is no need to write media-queries etc.

But, backing to your code, try to reload tinyscrollbar on window resize. If the widths change because of media queries, it's a must.

$(window).resize(function() {
   // reload your tinnyscrollbar again
});

How to create a Tiny horizontal scroll bar to display images inline one by one?

1 Answers1