Search code examples
htmlcssowl-carouselowl-carousel-2

Browser horizontal scrollbar appears when using owl-carousel


On my demo site, i am using the owl-carousel to slide some gallery images.

My problem is, that the browser's scrollbar is always visible, since i have added the owl-carousel to the site.

I tryed deleting html elements, like owl-dots in the console, overflow:hidden on each element, but nothing helped.

Demo site is here:

The owl carousel is almost at the and of the page, under a "Tekintse meg képgalériánkat" title.


Solution

  • It's not the carousel. You are not implementing bootstrap's grid layout properly. https://getbootstrap.com/docs/4.0/layout/grid/

    The error is in the row displaying the text "Tekintse meg képgalériánkat".

    Instead of

    <section class="my-5">
        <div class="row">
            <div class="col">
                <div class="module-head">
                    <div class="module-head-title">Tekintse meg képgalériánkat</div>
                </div>
            </div>
    
    . . .
    

    Do

    <section class="my-5">
        <div class="container">
           <div class="row">
               <div class="col">
                   <div class="module-head">
                       <div class="module-head-title">Tekintse meg képgalériánkat   </div>
                   </div>
               </div>
           </div>
         </div>
    . . .