Owl Carousel

Owl Carousel

  

I'm using SilkUI and I want to have that dots inside the container. 

I have provided the image of the pattern of the page.

How to have dots inside the container?


Hi Subham,


Try to make the dot container position absolute give width to 100 % and make the bottom to whatever position you want. something below 


.owl-pagination {
    position: absolute;
    width: 100%;
    bottom: 10px;
}


Regards,

Pankaj

Thanks.It is working perfectly.

One more question :How to change the width,height,color of dot so that active should have another color and inactive should have another color? 

Solution

Hey shubham,

Here is the code for all your queries.


SyntaxEditor Code Snippet

.owl-theme .owl-controls .owl-page span {
    background: #fff;/* background color for non active dots*/
    border-radius: 20px;/* to make dots in circle shape*/
    display: block;
    filter: Alpha(Opacity=50);/*IE7 fix*/
    height: 20px;/*height of dots*/
    margin: 10px 10px;
    opacity: .5;
    width: 20px;/*width of dots*/
    border: 1px solid #333;/*border for no active dots*/
}
.owl-theme .owl-controls .owl-page.active span, 
.owl-theme .owl-controls.clickable .owl-page:hover span,
.SliderRange .ui-slider-range,
.select2-results .select2-highlighted {
    background-color: #CE2200;/* background color for  active dots*/
}

Hope it will solve your queries.

Regards,

Pankaj

Solution

Thanks Pankaj

You are more than welcome, I'm glad I could help. :)