CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abilash Erikson
Abilash Erikson

Reputation: 351

Make Slider arrow always visible in magic slider

iam using magic slider for my website

http://m2.alothemes.com/bencher/

Here i want to make my arrow always visible . so i write the following css code 

.slick-next.slick-arrow, .slick-prev.slick-arrow{

    display: block;
    visibility: visible;
    opacity: 1;
    background-color: #eeeeee73 !important;
    border-radius: 2px;
}

This code is working . But the problm is that when i hover it then arrow is not showing and one effect is coming . Please try to fix this .

I want my slider arrow always present with a background color . Currently it is visble only when we hover the slider .

Upvotes: 0

Views: 443

Answers (3)

pramod
pramod

Reputation: 27

Add this class to your slider arrow.

.staticArrow{ opacity: 1 !important; visibility: visible !important; }

Upvotes: 0

Sumit Patel
Sumit Patel

Reputation: 4638

You can add below css will help you to get the desire output.

.home-slider.home-slider-index .slick-arrow {
    OPACITY: 1;
    visibility: visible !important;
}

Arrow

Upvotes: 2

Greedo
Greedo

Reputation: 3559

You have this rules at (index) (in-page css?): 

.slick-prev, .slick-next {
   color: #707070;
   background-color: #4f0606;
   border-color: #ffffff;
}

that overwrite the rule you wrote. In order to solve this, you can add !important next to the properties you want to overwrite, or consider to reorganize the import of your CSS files

Upvotes: 0

Related Questions