1

I am trying to change the navigation arrows and dots of "react-owl-carousel"(npm package) using CSS or JS for the past 2 days but unfortunately, I'm not successfully doing it. I don't want to use jQuery in that project.

enter image description here

I want to change these in this shape/style. enter image description here

Abubakar Shafique
  • 81
  • 3
  • 6
  • 2
    ofCourse you can by many ways , for css way you can select the arrows ( id - class name) whatever is provided to you by the library , you can see it from the dom inspector and then over right it with you custom css – Aly Abd El Rahman Jun 13 '21 at 06:43
  • Please create a [mcve], like a codesandbox. – T J Jun 13 '21 at 09:42

1 Answers1

0

"Select the arrows ( id - class name) whatever is provided to you by the library, you can see it from the dom inspector and then over right it with your custom CSS." So, I did this. It works perfectly! Thanks, -Aly Abd El Rahman

::scss::

#root {
.App {
    .owl-carousel {
        .owl-nav {
            .owl-prev {
                height: 80px;
                width: 40px;
                position: absolute;
                top: 47%;
                transform: translateY(-50%);
                cursor: pointer;
                left: 21px;
                background: transparent
                    url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
                transform: translateY(-50%);
                span {
                    visibility: hidden;
                }
            }
            .owl-next {
                height: 80px;
                width: 40px;
                position: absolute;
                top: 47%;
                transform: translateY(-50%);
                cursor: pointer;
                right: 21px;
                background: transparent
                    url(../../../assets/arrow-left-dark.svg) no-repeat 50%;

                transform: translateY(-50%) rotate(180deg);
                span {
                    visibility: hidden;
                }
            }
        }
        .owl-dots {
            position: absolute;
            top: 89%;
            left: 25vw;
            .active {
                background-color: white !important;
                height: 10px !important;
                width: 10px !important;
                transition: all 0.3s linear !important;
            }
            .owl-dot {
                background: hsla(0, 0%, 100%, 0.3);
                display: inline-block;
                height: 8px;
                width: 8px;
                margin-right: 30px;
                vertical-align: middle;
                border: none;
                transition: all 0.3s linear;
                span {
                    visibility: hidden;
                }
            }
        }
    }
}

}

Abubakar Shafique
  • 81
  • 3
  • 6
  • Can you also share what was inspector showing when you checked in DOM to know class names and how are these classes used by owl carousel? – Jay Mehta Jun 10 '22 at 19:07