In the Images gallery carrousel, how to keep the "arrows" always visible

Dear,

I’m trying to keep the arrows always visible. Why? Because if you check the mobile view, it’s unclear to users that they can scroll, simply because there is no “hover” on mobile so the arrows actually never get displayed. That’s why I believe arrows should always be visible on mobile.

Can you help to know how to keep the arrows always visible?
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Do you want the buttons to appear on whoever add this code:

body .wd-slider-wrapper .flickity-button {
opacity:0;
}
body .wd-slider-wrapper:hover .flickity-button {
opacity:1;
transition:3s;
}

If you have any questions please feel free to contact us.

Best Regards

Dear,

I’ve added the code you provided but it doesn’t work.
Can you please recheck?

Thanks

Hello,

Please provide the site admin access: https://gyazo.com/2eed8086f67f88c7d83b3a4d30d27117

Clarify how it should be, perhaps I misunderstood the purpose.

Best Regards

Please read back carefully my initial ticket.

In the title I talk about the “Images gallery carrousel” (I’m not talking about the woodmart sliders). And in the attachment, I show exactly where the problem is. Please check the attachment.

Credentials below

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .owl-carousel .owl-nav>div {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    pointer-events: visible;
}

Mobile devices have a variety of widths and if I show them on one device, it does not mean it would appear on another as well. That is why they are hidden and autorotation has been enabled to show that this is the image gallery.

Best Regards

Dear,

I tried the code, it works on right-arrow but left-arrow doesn’t appear always visible.

Is this normal?
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please try this code:

@media (max-width: 1024px){
body .wd-carousel-spacing-2 .owl-nav>div[class*="next"] {
    right: -20px;
}
body .wd-carousel-spacing-2 .owl-nav>div[class*="next"]:after {
    right: -20px;
    background:rgba(255,255,255,0.8);
}
body .wd-carousel-spacing-2 .owl-nav>div[class*="prev"] {
    left: -20px;
}
body .wd-carousel-spacing-2 .owl-nav>div[class*="prev"]:after {
   left: -20px;
   background:rgba(255,255,255,0.8);
}
}

Best Regards

Unfortunately this second code is not working neither for the purpose of my request.

Hello,

Sorry for misunderstanding. By default, in our theme, carousel arrows are always visible on mobile devices (https://gyazo.com/1948db92a4b3fef719d41dedff0c3422). How it works, you can see on the following page: https://woodmart.xtemos.com/images-gallery/.

In your case arrows are not visible due to the next coincidence of configuration:
1. You have placed image carousel in the WPB tabs element that by default contains “overflow: hidden” property which is cuts off (https://prnt.sc/1voc4uf) all visible content that is goes out from tab container.
2. You have disabled carousel on mobile devices in performance options (https://prnt.sc/1vocbhn). In that case carousel with arrows and dots pagination will be replaced with simple horizontal scroll bar. If carousel are disabled, scrollable content are indicated by semitransparent gradient which you decided to remove in one of the previous topics (https://xtemos.com/forums/topic/images-carrousel-very-bad-style-on-mobile/).

To fix your issue, you need:
1. Move your image gallery outside from tabs element, or add following custom CSS code to General Custom CSS area to remove “overflow: hidden” from WPB tabs element container:

.wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-panel,
.wpb-js-composer .vc_tta.vc_general.vc_tta-style-classic.vc_tta-tabs .vc_tta-panel.vc_active .vc_tta-panel-body {
	overflow: visible !important;
}

2. Enable carousels on mobile devices by turning off “Disable OWL Carousel script on mobile devices” option in theme settings (https://prnt.sc/1voeff5).

Kind Regards

Wonderful thanks Bogdan!

I re-enabled OWL and added your css code, and now it works great

You can close this ticket thanks

[Author]

Posts