CODEWITHSUNDEEP
jquerycssowl-carousel
EnzoTrompeneers
EnzoTrompeneers

Reputation: 1091

Owl Carousel arrows and dots are on the same height

I'm using the owl carousel and the arrows and the dots are on the same height position. I want the arrows positioned in the middle and the dots at the bottom (like now) but when I style the arrows to the middle the dots follow...

Hope anyone can help me out with this.

//////////////////////////////////////////////////////////////////// Details

enter image description here

    $("#carousel-slider").owlCarousel({
    	navigation : true,
    	slideSpeed : 500,
    	paginationSpeed : 800,
    	rewindSpeed : 1000,
    	singleItem: true,
    	autoPlay : true,
    	stopOnHover : true,
    	pagination: true,
    });
    #container-navbar-carousel {
      position:relative;
      float:left;
      width:100%;
      height: 100%;
    
      .container-carousel {
        position: relative;
        float:left;
        width: 100%;
        height: 100%;
        margin: 0;
        display: block;
        z-index: 1;
        border:1px solid #09f;
    
        .owl-carousel {
          position: relative;
          height: 100%;
    
          div:not(.owl-controls) {
            height: 100%;
          }
    
          .carousel img {
            width:100%;
            height:auto;
          }
    
          .slider {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
          }
    
          .wall-art {
            background-image: url("/assets/graphics/wall-art.jpg");
          }
    
          .camera {
            background-image: url("/assets/graphics/camera.jpg");
          }
    
          .record-player {
            background-image: url("/assets/graphics/record-player.jpg");
          }
    
          .owl-controls {
            position: absolute;
            bottom: 25px;
            left: 0;
            right: 0;
          }
          .owl-page {
            top: 0;
          }
        }
      }
    }
    
    .orbit-previous, .orbit-next {
      background-color: $color-orbit-background;
      width: 40px;
      height: 70px;
    
      .arrow-left {
        border: solid $color-arrow-border;
        border-width: 0 4px 4px 0;
        transform: rotate(135deg);
        height: 25px !important;
        width: 25px;
    
      }
    
      .arrow-right {
        border: solid $color-arrow-border;
        border-width: 4px 0 0 4px;
        transform: rotate(135deg);
        height: 25px !important;
        width: 25px;
      }
    }
    
    .orbit-previous {
      padding: 15px !important;
      position: absolute;
    }
    
    .orbit-next {
      padding: 5px !important;
    }
    
    .owl-carousel .owl-wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    
    .owl-carousel {
      display: none;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper {
      display: none;
      position: relative;
    }
    .owl-carousel .owl-wrapper-outer {
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper-outer.autoHeight {
      transition: height 500ms ease-in-out;
    }
      
    .owl-carousel .owl-item {
      float: left;
    }
    .owl-controls .owl-page,
    .owl-controls .owl-buttons div {
      cursor: pointer;
    }
    .owl-controls {
      user-select: none;
    }
    
    .intro {
      position:relative;
      float:left;
    }
    
    .owl-theme .owl-controls .owl-page.active span,
    .owl-theme .owl-controls.clickable .owl-page:hover span {
      background: rgb(226, 226, 226);
    }
    
    .owl-carousel .owl-wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    
    .owl-carousel {
      display: none;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper {
      display: none;
      position: relative;
    }
    .owl-carousel .owl-wrapper-outer{
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper-outer.autoHeight{
      transition: height 500ms ease-in-out;
    }
      
    .owl-carousel .owl-item{
      float: left;
    }
    .owl-controls .owl-page,
    .owl-controls .owl-buttons div{
      cursor: pointer;
    }
    .owl-controls {
      user-select: none;
    }
    
    .owl-theme .owl-controls{
      text-align: center;
    }
    
    .owl-theme .owl-controls.clickable .owl-buttons div:hover{
      filter: Alpha(Opacity=100);/*IE7 fix*/
      opacity: 1;
      text-decoration: none;
    }
    
    .owl-theme .owl-controls .owl-page{
      display: inline-block;
      zoom: 1;
    }
    .owl-theme .owl-controls .owl-page span{
      display: block;
      border-radius: 50%;
      border: solid 1px $color-bullet-border;
      background-color: $color-bullet-background;
      width: 16px;
      height: 15px;
      z-index: 2;
      margin: 0 10px;
      padding: 0;
    }
    
    .owl-theme .owl-controls .owl-page.active span,
    .owl-theme .owl-controls.clickable .owl-page:hover span{
      filter: Alpha(Opacity=100);
      opacity: 1;
    }
    
    .owl-theme .owl-controls .owl-page span.owl-numbers{
      height: auto;
      width: auto;
      color: #FFF;
      padding: 2px 10px;
      font-size: 12px;
      border-radius: 30px;
    }
    
    css
    
    #container-navbar-carousel {
      position:relative;
      float:left;
      width:100%;
      height: 100%;
    
      .container-carousel {
        position: relative;
        float:left;
        width: 100%;
        height: 100%;
        margin: 0;
        display: block;
        z-index: 1;
        border:1px solid #09f;
    
        .owl-carousel {
          position: relative;
          height: 100%;
    
          div:not(.owl-controls) {
            height: 100%;
          }
    
          .carousel img {
            width:100%;
            height:auto;
          }
    
          .slider {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
          }
    
          .wall-art {
            background-image: url("/assets/graphics/wall-art.jpg");
          }
    
          .camera {
            background-image: url("/assets/graphics/camera.jpg");
          }
    
          .record-player {
            background-image: url("/assets/graphics/record-player.jpg");
          }
    
          .owl-controls {
            position: absolute;
            bottom: 25px;
            left: 0;
            right: 0;
          }
          .owl-page {
            top: 0;
          }
        }
      }
    }
    
    .orbit-previous, .orbit-next {
      background-color: $color-orbit-background;
      width: 40px;
      height: 70px;
    
      .arrow-left {
        border: solid $color-arrow-border;
        border-width: 0 4px 4px 0;
        transform: rotate(135deg);
        height: 25px !important;
        width: 25px;
    
      }
    
      .arrow-right {
        border: solid $color-arrow-border;
        border-width: 4px 0 0 4px;
        transform: rotate(135deg);
        height: 25px !important;
        width: 25px;
      }
    }
    
    .orbit-previous {
      padding: 15px !important;
      position: absolute;
    }
    
    .orbit-next {
      padding: 5px !important;
    }
    
    .owl-carousel .owl-wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    
    .owl-carousel {
      display: none;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper {
      display: none;
      position: relative;
    }
    .owl-carousel .owl-wrapper-outer {
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper-outer.autoHeight {
      transition: height 500ms ease-in-out;
    }
      
    .owl-carousel .owl-item {
      float: left;
    }
    .owl-controls .owl-page,
    .owl-controls .owl-buttons div {
      cursor: pointer;
    }
    .owl-controls {
      user-select: none;
    }
    
    .intro {
      position:relative;
      float:left;
    }
    
    .owl-theme .owl-controls .owl-page.active span,
    .owl-theme .owl-controls.clickable .owl-page:hover span {
      background: rgb(226, 226, 226);
    }
    
    .owl-carousel .owl-wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    
    .owl-carousel {
      display: none;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper {
      display: none;
      position: relative;
    }
    .owl-carousel .owl-wrapper-outer{
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .owl-carousel .owl-wrapper-outer.autoHeight{
      transition: height 500ms ease-in-out;
    }
      
    .owl-carousel .owl-item{
      float: left;
    }
    .owl-controls .owl-page,
    .owl-controls .owl-buttons div{
      cursor: pointer;
    }
    .owl-controls {
      user-select: none;
    }
    
    .owl-theme .owl-controls{
      text-align: center;
    }
    
    .owl-theme .owl-controls.clickable .owl-buttons div:hover{
      filter: Alpha(Opacity=100);/*IE7 fix*/
      opacity: 1;
      text-decoration: none;
    }
    
    .owl-theme .owl-controls .owl-page{
      display: inline-block;
      zoom: 1;
    }
    .owl-theme .owl-controls .owl-page span{
      display: block;
      border-radius: 50%;
      border: solid 1px $color-bullet-border;
      background-color: $color-bullet-background;
      width: 16px;
      height: 15px;
      z-index: 2;
      margin: 0 10px;
      padding: 0;
    }
    
    .owl-theme .owl-controls .owl-page.active span,
    .owl-theme .owl-controls.clickable .owl-page:hover span{
      filter: Alpha(Opacity=100);
      opacity: 1;
    }
    
    .owl-theme .owl-controls .owl-page span.owl-numbers{
      height: auto;
      width: auto;
      color: #FFF;
      padding: 2px 10px;
      font-size: 12px;
      border-radius: 30px;
    }
<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.js"></script>
**html**

    <div id="container-navbar-carousel">
    	<div class="container-carousel">
    		<div id="carousel-slider" class="owl-carousel owl-theme">
    			<div class="slider wall-art" title="wall art"></div>
    			<div class="slider camera" title="camera"></div>
    			<div class="slider record-player" title="record player"></div>
    		</div>
        </div>
    </div>

Upvotes: 1

Views: 3753

Answers (1)

Kiran Shakya
Kiran Shakya

Reputation: 2559

This is purely CSS issue as El Danielo mentioned in his comment. The very basic solution would be to create a style based on class structure as:

.owl-controls .owl-buttons
{
    width: 100%;
    position: absolute;
    top: 50%;
}

What above CSS does is, just expands the buttons div to full span, so that it won't align left to your main div; then set its position as absolute and define top value to approximate middle.

Upvotes: 1

Related Questions