Autoplay progress slider

[Torah541]

Hi Guys,

I always appreciate your patience and super helpful advice.
I’m am looking to use your Modern Sliders Auto Play Progress Slider on our site to display images of our facility. I would love if there was a reletively easy way to add manual control arrows, keyboard and mouse control options, and a pause button. Is this something you can add do the demo as an option?

[Torah541]

Also, I’m having trouble using different sized images. Smaller images don’t fill up the entire slide background. Is there a way for all the images to automatically fill up the entire slide container?

[tristup]

Hi @Torah541,

Thanks for reaching out.
I have checked your website listed in your Themeco Account but didn’t find the Autoplay Progress Slider. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific page where you are having this issue

To create a secure note, click the key icon underneath any of your posts.

NOTE: There is already height set to 100% to the Image under the Figure of each slide.

Thanks

[ruenel]

Hey @Torah541,

Thanks for writing in!

1.) You will have to upload the same image dimensions so that the image will always cover the entire slide. Another option would be; is that you will have to set a minimum height for your slide and then use the image as a background image.

2.) You can add the Slide Pagination or the Slide Navigation element. You can also create your custom button to navigate to the slides. Kindly check out this documentation:
https://theme.co/docs/sliders#custom-attributes

Best Regards.

[Torah541]

Thanks for your help.
How do I move the navigation control to the right and left of the image and move the location of the pagination indicator?

[ruenel]

Hello @Torah541,

In your Slide Navigation element, set the following:

1.) Set the z-index to at least 9999;

2.) Set the width to 100%;

3.) Set the position to “Absolute” and the Top position to “35%” so that the next and previous buttons will be at the middle of the image slide.

Hope this helps. Best Regards.

[Torah541]

Thanks for this.
Is there any documentation on how to make the nav. arrows transparent and only fade in when hovered over with mouse?

[ruenel]

Hello @Torah541,

There isn’t exact documentation to make the nav. arrows transparent and only fade in when hovered. What you can do though, is to utilize the Effects module applied to the Slide Navigation element and its child elements. Please check out this Effects documentation:

• https://theme.co/docs/effects-module

Or you can check out this video tutorial:

Themeco 101: Effects Module

Hope this helps.

[Torah541]

Thanks. I really appreciate your help.
Hopefuly my last question on this matter.
I set the base opacity to 0 and the interaction opacity to 1 to get the desired effect. Is there a way to expand the hover area that triggers the interaction. Lets say hovering over the right most 20% of the image triggers the next arrow and the left most 20% of the image triggers the prev arrow.

[tristup]

Hi @Torah541,

Unfortunately, there is no such option available for that.

Thanks

[Torah541]

What about the prev/next buttons interaction controlling the icon opacity? Any way to do that?

[tristup]

Hi @Torah541,

Not sure what you are trying to mean by icon opacity here? Can you please elaborate a bit more?

Thanks

[Torah541]

I was refering to controling the icon interaction opacity adjustment effect.

[tristup]

Hi @Torah541,

Unfortunately, there is no option for that.

Thanks