Owl carousel item absolute position

Question

I'm trying to show a div with absolute position in item div (owl carousel) . but not working.

$("#owl-demo").owlCarousel({pagination:false});

body{height:500px}

#owl-demo .item{
  background: #3fbf79;
  padding:10px;
  margin:0px 10px;
  position:relative;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#owl-demo .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:block;
  padding:10px;
  background:red;
}

#no-owl{margin-top:30px}

#no-owl .item{
  background: #3fbf79;
  padding:10px;
  width:45%;
  position:relative;
  display:inline-block;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#no-owl .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:block;
  padding:10px;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<body>
<div>Owl carousel</div>
<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
  <div class="item">
    <h1>3</h1>
    <div class="show">Item 3</div>
  </div>
  <div class="item">
    <h1>4</h1>
    <div class="show">Item 4</div>
  </div>
</div>



<div id="no-owl">
  <div>No carousel</div>
<div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
</div>
  </body>

How to show absolute content without adding carousel height : https://jsfiddle.net/Ljz7c8fg/1/

score 0 · Answer 1 · answered Aug 03 '16 at 21:34

0

You need to set:

bottom: 0px;

on:

#no-owl .show

answered Aug 03 '16 at 21:34

D. Wilson

136
5

No wrong. The `#no-owl` just a demo what i want to show in `owl-carousel` – MAHAR Aug 03 '16 at 21:50
So do you want the absolute div inside the item div width 100% and 100% height of the relative div? #owl-demo .show{ position:absolute; margin-bottom:0; left:0px;top:0px;right:0px;bottom:0px; display:block; padding:10px; background:red; } – D. Wilson Aug 03 '16 at 21:58
Just same like `No carousel` demo. – MAHAR Aug 03 '16 at 22:06

score 0 · Answer 2 · answered Aug 03 '16 at 21:58

0

the problem is caused by the "overflow: hidden" from ".owl-carousel .owl-wrapper-outer". If you give it a height the problem will be solved (but I think the height should be automatically calculated, I mean the height of the Carousel should be equal to the highest carousel item.). Can you use Javascript for your issue?

answered Aug 03 '16 at 21:58

Marouen Mhiri

1,640
1
14
20

or check this! it's a dirty fix for your issue: http://stackoverflow.com/questions/36201595/owl-carousel-show-child-absolute-div-over-parent-overflow-hidden-div. Don't forget to add overflow-y: hidden to your body or to the outer Container of your carousel. – Marouen Mhiri Aug 03 '16 at 22:06
I know but see this https://jsfiddle.net/Ljz7c8fg/ and i don't want to add `px/%` height because the item `.show` content is dynamic and height will not same for each item. I think you understand. – MAHAR Aug 03 '16 at 22:20
ok so you have to use Javascript to calculate the height of the highest carousel item and then give .owl-wrapper-outer this height. – Marouen Mhiri Aug 03 '16 at 22:22
Ok but not solved. I don't want that you know if i have two `div` up and down and it just increase the distance between two div which i don't want. – MAHAR Aug 03 '16 at 22:26
hmm I don't really understand the problem. So :-) the overflow prevent you showing content outside the carousel, so the only way you have is to give your outer-wrapper a height. Depending on your markup, you have to know which elements you have under the items so you can calculate the whole height: this Fiddle fix the issue you posted first: https://jsfiddle.net/Marouen/nu8zwL86/ – Marouen Mhiri Aug 03 '16 at 22:43
Good! But you have to post your fix so that other people can lern from it. – Marouen Mhiri Aug 04 '16 at 05:34

score 0 · Accepted Answer · answered Aug 03 '16 at 23:23

$("#owl-demo").owlCarousel({pagination:false});

$("#owl-demo .item, #no-owl .item").hover(function(){
    $(this).find('.show').show();
    }, function(){
    $(this).find('.show').hide();
});

body{overflow-x:hidden !important;height:500px}
#owl-demo .item{
  background: #3fbf79;
  padding:10px;
  margin:0px 10px;
  position:relative;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#owl-demo .show{
  position:absolute;
  margin-bottom:0;
  left:0;
  display:none;
  padding:10px;
  background:red;
}

#no-owl{
   padding:30px;
   display:block;
   background:blue;
   color:white
}

.owl-carousel .owl-stage-outer {position:relative !important;overflow:hidden !important}

.owl-carousel .owl-wrapper-outer {width:100% !important;position:relative !important;overflow:visible !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>

<body>

<div id="no-owl">
Some Content
</div>

<div id="owl-demo" class="owl-carousel owl-theme">
  <div class="item">
    <h1>1</h1>
    <div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
 <div class="item">
    <h1>2</h1>
    <div class="show">Item 2</div>
  </div>
  <div class="item">
    <h1>3</h1>
    <div class="show">Item 3</div>
  </div>
  <div class="item">
    <h1>4</h1>
    <div class="show">Item 4</div>
  </div>
</div>



<div id="no-owl">
Some Content
</div>

</body>

Owl carousel item absolute position

3 Answers3