Why is the owl carousel creating a white space/gap?

HTML & CSS
1

Right now the carousel image is expanded full width and is responsive, but it’s too big. How do I adjust the size to make it smaller? I am using owl carousel. There is an awkward white gap after adding in the carousel, on the right size. The horizontal scrollbar appears where as before without the carousel, there was no horizontal scrollbar and the width of the image expanded full width without having to use the horizontal scrollbar.

What is wrong with my code? Sorry I can’t upload the site because I was not giving permission to access to the companies server yet. I am just building it locally for now.

<section id="app" class="section-padding">
	<!-- carousel -->
        <div class="containter">   
            <div class="row">
                <div class="col-sm-12 text-center">
                    <h2>How It Works</h2>                  
                </div>  
             
                <div id="owl-slider" class="owl-carousel owl-theme">
                    <img src="img/browsemovie.png" alt="browse movie" class="img-responsive">
                    <img src="img/browsemovie.png" alt="groups" class="img-responsive">
                    <img src="img/browsemovie.png" alt="popular spot" class="img-responsive">
                    <img src="img/browsemovie.png" alt="chats" class="img-responsive">
                </div> 
            </div>
        </div> 
        <!-- end carousel -->
    </section>

<script>
        $(document).ready(function() {
            $("#owl-slider").owlCarousel({
                autoplay: true,
                autoplayHoverPause: true,
                autoplayTimeout: 4000,
                items: 1,
                loop: true,              
              })
        })

    </script>

carousel-slider .item img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px !important;
}

#owl-slider .owl-prev {
    width: 40px;
    height: 40px;
    background: url(../img/carousel-arrow-prev.png) no-repeat center center;
    border: 3px solid #ffffff;
    float: left;
    margin-left: 10px;
    position: relative;
    border-radius: 50%;
    opacity: 0.5;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .5s ease-in-out;
    z-index: 10;
}

#owl-slider .owl-next {
    width: 40px;
    height: 40px;
    background: url(../img/carousel-arrow-next.png) no-repeat center center;
    border: 3px solid #ffffff;
    float: right;
    margin-right: 13px;
    position: relative;
    border-radius: 50%;
    opacity: 0.5;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .5s ease-in-out;
    z-index: 10;
}

#owl-slider .owl-prev:hover, #owl-slider .owl-next:hover {
    opacity: 0.7;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}

.owl-slider .owl-buttons {
    height: 30px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    margin: auto;
    z-index: -999999;
}
2

The HTML and CSS do not match. It is not possible to create a working page from the little code that you’ve posted. Perhaps you can create a CodePen that demonstrates the problem.

3

i did not upload all the files, so it looks funny.

4

Your topic is about an owl carousel slider.

We need to be able to demonstrate (see) the issue for ourselves so we can troubleshoot it.

5

I’m sorry I can’t upload the site since i don’t have a server to upload it to because the company I am working for has not taught me how to use Heroku to upload the website.

Does this help??? http://imgur.com/a/R90MA.

There is white gap on the right side with a horizontal bar that’s not suppose to be there. Without the carousel slider, the horizontal bar is gone and it expands it’s full width without adding an extra white space on the right side of it. I took this code from a tutorial on youtube and downloaded the plugin for the owl-carousel. I didn’t change any of the codes in the plugin. I only added the css codes for the carousel.

[Album] imgur.com

$(document).ready(function() {
$(“#owl-slider”).owlCarousel({
autoplay: true,
autoplayHoverPause: true,
autoplayTimeout: 4000,
items: 1,
loop: true,
})
})

</script>
6

Hi,

The 15px gap at the right of the page is cause by a typo you made here.

  <section id="app" class="section-padding">
    <!-- carousel -->
        <div class="containter">

You have ‘containter’ instead of container :slight_smile:

4 Likes
7

Thank you! Thank you so much! This fixed the problem as well as the size of the carousel!!! Thank you! I would hug if you if I could! lol

8

Let me help.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.