CODEWITHSUNDEEP
jquerycssowl-carousel
user1775888
user1775888

Reputation: 3313

owl carousel, navigation center

I use owl carousel plugin, can't find how to let navigation vertical align center, with option autoHeight.

http://codepen.io/anon/pen/jJAHL

I tried like below, but it only get last height.

$(this_gallery).owlCarousel({
  singleItem: true,
  autoHeight : true,
  navigation:true,
  stopOnHover : true,
  afterAction: function() {
    var center_height = $(this_gallery).find('.owl-wrapper-outer').height();
    console.log(center_height);
  }
});

Upvotes: 2

Views: 19481

Answers (7)

Saurabh Madhukar
Saurabh Madhukar

Reputation: 41

body .owl-nav {
  position: absolute;
  top: calc(50% - 14px);
  width: 104%;
  left: -47px;
  display: flex;
  justify-content: space-between;
}

button.owl-prev>span,
button.owl-next>span {
  background: #efefef;
  font-size: 49px;
  border-radius: 50%;
  padding: 7px 7px 14px 7px;
  width: 50px;
  height: 50px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
}

Upvotes: 0

rohit shetty
rohit shetty

Reputation: 1

.owl-prev, .owl-next
{
    position: absolute;
}
.owl-prev
{
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px !important;
    background-color: transparent !important;
    outline: none !important;
}
.owl-next
{
    right: -60px;
    top: 50%;`enter code here`
    transform: translateY(-50%);
    font-size: 40px !important;
    background-color: transparent !important;
    outline: none !important;
}

Upvotes: 0

Md Dalwar
Md Dalwar

Reputation: 54

You can add these codes to the stylesheet. These codes will center your owl carousel navigation. Hope you will enjoy.

    .owl-nav .owl-next, .owl-nav .owl-prev {
        position: absolute;
        top: 48%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    .owl-nav .owl-next {
        right: 0;
        display: flex;
        margin-right: 2%;
        font-size: 25px !important;
    }
    .owl-nav .owl-prev{
        left: 0;
        display: flex;
        margin-left: 2%;
        font-size: 25px !important;
    }

Upvotes: 1

Tariqul_Islam
Tariqul_Islam

Reputation: 567

You can try this:

.owl-nav div {
      position: absolute;
      left: -50px;
      top: 45%;
      color: $theme-color;
      display: table;
      &.owl-next {
        left: auto;
        right: -50px;
      }
    }

Upvotes: 0

Nikolai
Nikolai

Reputation: 266

a bit late maybe but this worked well for me and might help others: 

#photos .owl-nav{
    position: absolute;
    top: 45%;
    width: 100%;
}
#photos .owl-prev{
    float:left;
 }
#photos .owl-next{
    float:right;
}

Upvotes: 2

Sushmit Patil
Sushmit Patil

Reputation: 1465

Change css for prev and next buttons

.owl-theme .owl-controls .owl-buttons .owl-next,.owl-theme .owl-controls .owl-buttons .owl-prev
 {
    top:40%;
 }

Upvotes: 0

Husen
Husen

Reputation: 935

Instead of giving top position in the pixel give it in the percentage like following:

.owl-theme .owl-controls .owl-buttons .owl-prev {
    left: -45px;
    top: 45%;
}

Upvotes: 3

Related Questions