2

I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.

I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.

I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.

For example if i have this:

    <div class="container-fluid">
    <div class="row">
    <div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
    </div>
    <div class="col-md-4">
<h2> Just a right hand panel</h2>
    </div>
</div>
</div>

The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.

Is owl carousel truly responsive or do you have to fix a width to it for it to work?

novak73
  • 15
  • 2
  • 6

2 Answers2

0

I know this is old problem but i sloved it with wrapper and little jQ code. Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.

Remember add resize event.

My HTML ( div with class owl-wrapper used in jQ ):

<section class="container-fluid">
    <div class="owl-wrapper">
        <div class="row">
            <div class="col-md-8">
                <div class="owl-carousel owl-theme ">       
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
</section>

jQuery file:

$(document).ready(function($){  
 var windowWidth = $( window ).width();
 $('.owl-wrapper').css('width', windowWidth);

  $('.owl-carousel').owlCarousel({
    loop:true
 });
});
Bartek Qoster
  • 17
  • 3
  • but thats not making it responsive...that is making it the same size as the screen width which is something that i don't require. I have a grid layout and if i put the carousel in a col-lg-8 i want it to be within that container. It ignores the width of 749px that the width that the col-lg-8 has. – novak73 Dec 06 '17 at 10:43
0

Try putting min-width : 100% on the parent container.

Eru
  • 71
  • 1
  • 6