CODEWITHSUNDEEP
jquerytwitter-bootstrapslidercarouselowl-carousel
Cray
Cray

Reputation: 5483

Centered carousel with Bootstrap

I want to use the bootstrap carousel to build a centered slider with offscreen items. Like this example (the second on the page): http://owlcarousel.owlgraphic.com/demos/center.html

The problem with the example is, that the items are not aligned with the bootstrap grid. Is there any possibility to built it based on the bootsrap carousel and grid?

Upvotes: 0

Views: 146

Answers (2)

Cray
Cray

Reputation: 5483

I found a solution. You can give the div ".item" the min-width of the container based on the breakpoint.

For large screens you can do the following:

.item {min-width: 1140px}

Upvotes: 0

Ruslan Zhomir
Ruslan Zhomir

Reputation: 888

Just place whole carousel to container with div with negative side margins like that:

<div class="container">
  <div style="margin-left: -45px; margin-right: -45px">
    <div class="loop owl-carousel owl-theme owl-center owl-loaded">
       ...
    </div>
  </div>
</div>

You only need to choose suitable value for that negative margins

Upvotes: 1

Related Questions