Photo Carousel in a Single product page

Hi @burgerino,

You can change the current icons for next and previous button of the carousel navigation with custom CSS code. For example:

.botiga-flex-direction-nav a:before {
  border: none;
}

.botiga-flex-nav-prev a:before {
  -webkit-transform: translateX(2px) rotate(0deg);
          transform: translateX(2px) rotate(0deg);
}

.botiga-flex-nav-next a:before {
  -webkit-transform: translateX(-2px) rotate(0deg);
          transform: translateX(-2px) rotate(0deg);
}
.botiga-flex-nav-prev a:before,
.botiga-flex-nav-next a:before {
  background-position: center center; 
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;    
}

.botiga-flex-nav-prev a:before {
  background-image: url('Your_Previous_Icon_Image_URL');
}

.botiga-flex-nav-next a:before {
  background-image: url('Your_Next_Icon_Image_URL');
}

Replace Your_Previous_Icon_Image_URL and Your_Next_Icon_Image_URL with URLs to your images uploaded into your site’s media library.

To apply custom CSS code to your site, add it to Additional CSS under Appearance menu > Customize.

Hope this reply helps.

Thanks for this. I tried to add as you mentioned but it did not work

.botiga-flex-nav-prev a:before {
  background-image: url('https://pcgigant.lt/wp-content/uploads/2022/09/left-arrow.svg');
}

.botiga-flex-nav-next a:before {
 ?background-image: url(https://pcgigant.lt/wp-content/uploads/2022/09/right-arrow.svg');
}

Hi @burgerino,

Thank you for trying.

Looks likely your code contains a little bug.

Please try this code instead:

.botiga-flex-direction-nav a:before {
  border: none;
}

.botiga-flex-nav-prev a:before {
  -webkit-transform: translateX(2px) rotate(0deg);
          transform: translateX(2px) rotate(0deg);
}

.botiga-flex-nav-next a:before {
  -webkit-transform: translateX(-2px) rotate(0deg);
          transform: translateX(-2px) rotate(0deg);
}
.botiga-flex-nav-prev a:before,
.botiga-flex-nav-next a:before {
  background-position: center center; 
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;    
}

.botiga-flex-nav-prev a:before {
  background-image: url('https://pcgigant.lt/wp-content/uploads/2022/09/left-arrow.svg');
}

.botiga-flex-nav-next a:before {
  background-image: url('https://pcgigant.lt/wp-content/uploads/2022/09/right-arrow.svg');
}

Hi Kharis, thanks for looking into this. Sadly, it still does not work.

To be honest, I don’t really need specific arrows. I would be happy with default option as found in your presentation https://athemes.com/wp-content/uploads/carousel-product-thumbnails.mp4

However, I just would like not to have these “Previous” and “Next”. To my understanding, it looks like a bug, right?

Regards!

Hi Kharis, I was wondering if you had a look at this issue? I updated to 1.2.1 but the bug still persists. Thanks a lot

up