Как создать миниатюрную горизонтальную полосу прокрутки для отображения встроенных изображений одно за другим?

Question

Как создать миниатюрную горизонтальную полосу прокрутки для отображения встроенных изображений одно за другим?

0

Я использую Tiny Scrollbar Plugin, чтобы создать крошечную горизонтальную полосу прокрутки, чтобы отображать кучу изображений внутри div в неустранимом сингле в уменьшенном размере окна 768 px с помощью Media Queries. Когда я запускаю приведенный выше код и уменьшаю размер окна до 768 px, я отобразил свои изображения в одной строке, но, к сожалению, я не получаю горизонтальную полосу прокрутки для прокрутки изображений. Я не знаю, где я делаю неправильно. Может кто-нибудь сказать, как получить крошечную горизонтальную полосу прокрутки

<!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>

Jagan Mohan 13 дек. 2013, в 09:03

Источник

Теги:

html

css

media-queries

tinyscrollbar

1 ответ

Ещё вопросы

Mike Grabowski · Answer 1 · 2014-02-01T19-55-00.000Z

Я бы предложил перейти на bxslider, если вы не возражаете.

Вот простой пример. (Игнорировать белые границы вокруг изображений). Вы должны посмотреть страницу параметров, этот слайдер очень настраивается.

Единственное недовольство для вас - отсутствие горизонтальной полосы прокрутки. Но слайдер полностью реагирует, поэтому нет необходимости писать медиа-запросы и т.д.

Но, поддерживая свой код, попробуйте перезагрузить tinyscrollbar при изменении размера окна. Если ширина изменяется из-за медиа-запросов, это необходимо.

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