Owlcarousel2: OWL - are the control dots moveable? (I need some help!)

[lautaromss]

Hi Jez; you are supoused to style those dots with your own CSS. If you want them to sit on top of the slider the easiest way is to put a negative top margin (e.g. margin-top:-20px;) and some z-indexes. You can copy-paste the following CSS, I tested it on your website too and it does what you want:

.owl-stage-outer {
    position:relative;
    z-index:10;
}

.owl-controls {
    position:relative;
    z-index:99;
    margin-top:-35px;
}

If you want to remove the dots and use arrows instead, you should create your own divs for arrows, position them wherever you want (using CSS), give them a class like "next-btn" and "prev-btn" and add this javascript code:

    // Go to the next item
    $('.mlabs-next-btn').click(function() {
        owl.trigger('next.owl.carousel');
    })
    // Go to the previous item
    $('.mlabs-prev-btn').click(function() {
        owl.trigger('prev.owl.carousel');
    })

If you are not sure what CSS to use just go to a website where there is a slider that you like and inspect what CSS they are using to do their arrows (on chrome, right click on the arrow of the slider you like and click inspect).

[JezCheese]

Hi Lautaro,
many thanks, you're an absolute star!
I was trying to push the dots up onto the images, but using a -ve margin and pushing up the panel below, is much easier!
Thanks for thinking roudn teh problem a different way to me.
Cheers
Jez

[radosvet93]

.owl-carousel{
  position: relative;
}

.owl-dots{
  position: absolute;
  top:10px;
  left:25%;
  right:25%;
}

This code will make the dots to be on the top and center of the carousel. The same applies for the owl-nav class