Problem of transition with content slider

Hey Pierre,

Thank you for the inquiry.

Looks like you’re using a custom gallery from a plugin in the content slider. Please edit the gallery settings and check if there’s an option for a slider background. If not, consider reaching out to the plugin developers for further assistance.

Best regards,
Ismael

Hi,

You can try this css code but it might affect the slider transition a bit.

.slide-entry-wrap:not(.active-slide) .slideimage .fg-image-viewer .fiv-inner .fiv-inner-container .fg-item .fg-thumb img {
    opacity: 0;
}

For additional assistance, please contact the developers of the slider plugin.

Best regards,
Ismael

Hi,

To adjust the size and position of the slider arrows, try to add this css code:

#top .avia-smallarrow-slider .avia-slideshow-arrows a {
  opacity: 0;
  margin: 0;
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  font-size: 20px !important;
  top: 0;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
  height: 20px;
  width: auto;
  margin-top: 15px;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: relative;
  width: 120px;
  top: 20px;
  left: auto;
  height: 24px;
  right: 10px;
}

If you’re trying to disable the image overlay, add this code:

.image-overlay, .image-overlay .image-overlay-inside {
    display: none !important;
}

Best regards,
Ismael

Hi,
It looks like you had a duplicate thread for the overlay icon, check here.

Best regards,
Mike

Hi,
I see that you have this custom css:

#top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
    width: 24px !important;
    opacity: 1;
}

this is forcing the width to 24px, you can change this css and then add the css above, or try this css instead:

#top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 20px !important;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: relative;
  width: 120px;
  left: auto;
  height: 50px;
  right: 10px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
    height: 20px;
    margin-top: 17px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
currently:

with this new css:

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike