No padding / changing color of arrows?

Resolved HB101
(@hb101)

6 years, 1 month ago

Hi,
I tried a few carousels by now and so far I liked yours best as I was looking for a carousel including a lightbox. However: isn’t there any way add padding between the images, nor a way to change the color of the blue arrows?

Thanks in advance,
Hetty (Netherlands)

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Anoop Ranawat
(@anoopranawat)

6 years, 1 month ago

Hello,

paste this css in your theme’s css file.

To add some space between two image add this css:

.msacwl-carousel-wrap .msacwl-gallery-carousel button.slick-next {right: 5px;}
.msacwl-carousel-wrap .msacwl-gallery-carousel button.slick-prev {left: 5px;}
.msacwl-carousel-wrap .msacwl-carousel-slide {margin: 0 5px;}

To change the color of the blue arrows:

.msacwl-gallery-carousel button.slick-prev, .msacwl-gallery-carousel button.slick-prev:hover {background-color: #000 !important;}

where #000 color code is replace by your desire color code.
nr27
(@nr27)

5 years, 11 months ago
the code for changing the color of the blue arrows just works for the left arrow.

It should be:
.msacwl-gallery-carousel button.slick-prev, .msacwl-gallery-carousel button.slick-prev:hover {background-color: #000 !important;}
.msacwl-gallery-carousel button.slick-next, .msacwl-gallery-carousel button.slick-next:hover {background-color: #000 !important;}

But as soon as you hover they change back to blue…?!
- This reply was modified 5 years, 11 months ago by nr27.
- This reply was modified 5 years, 11 months ago by nr27.
- This reply was modified 5 years, 11 months ago by nr27.
Plugin Author Anoop Ranawat
(@anoopranawat)

5 years, 11 months ago
Hello,

Thank you for using our plugin.

you can put this css in your theme css file,

.msacwl-slider .msacwl-gallery-slider button.slick-prev:hover{background: #000 url(‘../images/arrow-left.png’) center center no-repeat !important;}

.msacwl-slider .msacwl-gallery-slider button.slick-next:hover{background: #000 url(‘../images/arrow-right.png’) center center no-repeat !important;}

if you facing any problem please let me know.
- This reply was modified 5 years, 11 months ago by Anoop Ranawat.
nr27
(@nr27)

5 years, 11 months ago

Thanks for the quick reply but that code does not work at all….