Thumbnail Not Scrolling

[ajayppeter]

Is there a way to implement scroll on thumbnails

[warlord0]

Yes. This is exactly what I have done.

To do so I put the thumbs into their own div

    <main>
        <div id="pages" class="owl-carousel owl-theme" data-slider-id="1">
        </div>
    </main>

    <nav>
        <div id="owl-thumbs">
        </div>
    </nav>

Then some css

        .owl-thumbs {
            position: fixed;
            z-index: 999;
            left: 0;
            bottom: 0;
            height: 120px;
            /* initial width */
            width: 2000%;
            background-color: #222;
        }

Then in your owl initialisation tell it to put the thumbs into your div

    navContainer: '#owl-nav',

You could then allow the overflow handle scrolling or get a bit more creative and write your own like I've done.

If you want to get a bigger overview of what I mean the full project is here: https://github.com/warlord0/cbr-manager

[ghost]

Hi @warlord0, not sure how you managed to get this to work, as your code samples have lots of errors in them with mis-joining IDs and classes.

Is there any native way to implement drag scrolling on the thumbs, or an easy way to get this added via Bootstrap?

I tried simply using white-space:nowrap on the container div, and overflow-x:auto, but this obviously adds the awful scrollbar, and doesn't allow the mouse to be able to drag. I'd like to handle this using CSS as much as possible without jQuery. Is this possible?

[sumachaa]

We too need this feature, as we have more than 20 items, and is there a way to have thumbs scrollable instead of everything displayed at once