Need some help with width of Auto Play Slider

Hi Support,

I’m having trouble getting the Auto Play slider to fill the width of the screen. On the video where it says “The trick is that the figure is positioned absolutely so that it always fills the screen” doesn’t seem to be doing it so I must have missed something.

The look I’m going for is a full screen image with a floating sticky nav bar at the bottom (like in a previous ‘better headers’ youtube tips video) combined with the autoplay slider to replace what was the background image as per the ‘better headers’ video.

I’ve set the VH to be 100 minus the pixel height of the bar, but I cant figure out the width, can you help? :grin:

Also how can I add my image (logo) to be part of the JSON so that it is arranged in the bottom right above the text?

Your help is much appreciated

Hello Edward,

Thanks for writing in! You may need to set the size of the slider container to 100%.
Screen Shot 2021-11-07 at 8.29.15 AM

If this do not work, we would love to check your slider settings. Kindly provide us access to the site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Hi @ruenel,

Thanks for offering to take a look. I’ve added a my details to the secure note.

I’ve checked the content sizing is 100%,

Thanks

Hello Edward,

To get your issue resolved, you will have to do the following:

1.) In your Hero Bar settings, set the height to Auto.

2.) You also need to set the Gutter to 0.

3.) You also need to set the top padding to 0:

4.) And then in your Autoplay Progress Slider element, you will have to set the width to 100%.

And if you want to set the slider as fullscreen, you will have to set the height of each slide.

Hope this makes sense. Thanks.

Hi @ruenel,

Yes that makes perfect sense, I’ve Been through and checked each setting and thank you for doing it for me. I’m glad you explained the process because I will use this layout again.

There was just one more thing.

Incase I wanted to add the logo/image to be part of the JSON looper, so that everything is stacked in the bottom left how do I do it?

I’ve tried adding another image line into the first slide but I don’t think its working because there is already an image line pulling the background image.

and I added the looper line to the image source box into the alt text area,

Screen Shot 2021-11-07 at 13.49.22

But that didn’t work.

Hello Edward,

Your JSON will be like this:

  {
   	"logo"       : "https://sonergy.pro/wp-content/uploads/2021/11/Sonergy-Logo-V10.png",
    "title"       : "We are Sonergy",
    "description" : "So much Energy",
    "image"       : "https://sonergy.pro/wp-content/uploads/2021/11/beautiful-strawberry-garden-sunrise-doi-ang-khang-chiang-mai-thailand.jpg",
    "ctaText"     : "Start My Journey",
    "ctaLink"     : "#thing-1"
  }

And then use {{dc:looper:field key="logo"}} for the image Source while using {{dc:looper:field key="title"}} for the Alt Text in your image element.

Kindly let us know how it goes.

Hi @ruenel

Thanks for the tip and sorry for the late reply. I’ve tried exactly as suggested but I’m getting the broken image symbol. I’ve checked url is correct.

Hey Edward,

The Dynamic Content has some syntax errors.

image

To avoid that, it’s best to use the DC user interface.

image

Thanks.

@christian

Thank you so much

You are most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.