How to change background color on slideshow (swiper) on opecart 3.0+

Question

I use opencart 3.0+ and want to change the background from slideshow on homepage to transparent.

My Web

I open /catalog/view/javascript/jquery/swiper/css/swiper.css

And change this line of code:

.swiper-pagination-white .swiper-pagination-bullet {
  background: #fff;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #fff;
}

to

background: transparent;

But nothing works.

I specifically looked for how to do it on the forums but couldn't find anything related to the problem.

Can I get help how to fix the slider background issue?

Answer 1

I just inspected your code and you have to do this in css for transparent background on swiper element.

But there is one issue, your images is have white background. So these swipes can not be fully transparent. You have to use transparent png/webp images or SVG illustrations.

.swiper-viewport{
background-color:transparent;
}