CODEWITHSUNDEEP
jqueryhtmlcssowl-carousel
user6930268
user6930268

Reputation:

How to display the owlCarousel2 slider content in the center?

I am using an owlCarousel2 plugin (https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html). Everything is working perfectly but the issue is in the content. I have three slides of the content. Length of the two sides are same but in the last slide, contents are more so that's the reason my first two slides are not displaying in the center. I need all the slider should be displayed in the center.

$(document).ready(function() {
  $("#owl-example").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      margin:10,
      paginationSpeed : 400,
      autoplay:false,
      items : 1, 
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
});
 
.left_50{
  width: 600px;
  margin: 0 auto;
}
#owl-example{
  border: 1px solid #000;
}
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
  left: 0;
  display: flex;
}
body .owl-next{
  right: 0;
  display: flex;
}
body .owl-prev i, body .owl-next i{
  margin: auto;
}

#owl-example .owl-item{
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
}
#owl-example .owl-item p{
  font-size: 25px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
  
  <div class="left_50">
<div id="owl-example" class="owl-carousel">

 <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem</p> </div>
 <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem.ipsum</p> </div>
  <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div>
</div>
</div>

Upvotes: 1

Views: 789

Answers (1)

lalit bhakuni
lalit bhakuni

Reputation: 627

you can use display: flex; and align-items: center; above of the owl item div

.owl-stage {
    display: flex;
    align-items: center;
}

than it's working fine

Demo : https://www.w3schools.com/code/tryit.asp?filename=FNM14PUMZMNU

Upvotes: 1

Related Questions