Hello! Help advice. How can I make arrows for owl carousel that go beyond the bootstrap grid (in the project I use the pure bootstrap grid). Ie I have a carousel for col-md-12 , and the arrows go beyond the grid on the layout. There are options?

Here is the screen layout: http://uploads.ru/qWtaR.png

Here is the markup:

 <section class="slider-wrap"> <div class="slider-nav-container"> <div class="slider-nav"> <div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div> <div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="owl-demo" class="owl-carousel owl-theme"> <!-- Slide Start --> <div class="item"> <div> <h2>WE THINK CREATIVE BE CREATIVE</br> LIKE TO DO CREATIVE WORKS</h2> </div> <div class="scroll"> <div><i class="pe-7s-mouse"></i></div> <div>Scroll down</div> </div> </div> <!-- Slide End --> </div> </div> </div> </div> </section>
  • If you asked a question and you are editing, then you need to merge accounts. Read here how to do it - Alex

2 answers 2

Slider put in the container .
Before the slider left arrow, after the slider right arrow. It all looks something like this:

HTML :

  <div class="wrap"> <div class="left-arrow"><img src="/arrow-l.png"></div> <div class="container"><div class="row"><div class="col-md-12"> slider content </div></div></div> <div class="right-arrow"><img src="/arrow-r.png"></div> </div>


CSS for positioning arrows:

 .left-arrow,.right-arrow{ padding-top: /*нужное значение */; }


You can also do this in container-fluid :

  <div class="container-fluid"> <div class="row"> <div class="col-md-1"> <div class="left-arrow"><img src="/arrow-l.png"></div> </div> <div class="col-md-10"> slider content </div> <div class="col-md-1"> <div class="right-arrow"><img src="/arrow-r.png"></div> </div> </div></div>


CSS is the same.

  • Thank you very much! I managed. True, the css code was made very dumb. Paddings are huge. I’m wondering if it’s a bad layout or otherwise it wasn’t. I tried everything, but I didn’t move anything until I put up with this code: .slider-wrap position: static .prev position: absolute padding-top: 265px padding-left: 150x font-size: em (100px) color: lighten ($ main-color, 50%) .next position: absolute font-size: em (100px) color: lighten ($ main -color, 50%) .fa position: absolute bottom: 340px left: 1250px - Safbek
  • @Safbek, if you don’t use preprocessors, then I advise you to go to them now (Sass);) There is one mixin that I regularly use to center the element (including vertical, damn vertical align never works). Try using sass and learn mixins (this is very simple, but soooo easy to work with css). - Ep1demic 2:51
  • Ep1demic I recently started using sass and I am very new to its capabilities (But, I hope, I’m quietly and I’ll learn. And yes, vertical align didn’t work in any way. Can you share this mixin?)) If it is possible - Safbek
  • @Safbek, css-tricks.com/snippets/sass/centering-mixin - Ep1demic
  • Ep1demic Many thanks!) - Safbek

Without the source, some kind of guessing game is obtained, but I will try to suggest it.

Wrap elements with arrows; set position: static attribute to it. This is necessary in order to zero the positioning style settings applicable in bootstrap. To the arrows themselves, I don’t know in which tag they are located in you, but use the position: absolute attribute on them (by id, for example), and specify the location relative to the browser window using left top right bottom .

Materials for study:

http://htmlbook.ru/samlayout/blochnaya-verstka/pozitsionirovanie-elementov http://htmlbook.ru/css/position

  • Thank you for responding! - Safbek