Slider with photos of varying widths

[capodanno]

I am using the Inline Slider element, and wish to have a slider of photos of varying widths.

Here’s an example from another site, showing a slider where each slide is the same height, but varying widths:
https://k9noseworkacademy.com/students

Here’s mine so far:
https://ena.b05.myftpupload.com/slider-example/

Questions:

1. I’m using the “Auto” layout, to allow for differing widths. But how do I get the whole slider to be a certain height (say 600px) and fill up each slide with the entire photo, at whatever width it needs to be?

2. Once I accomplish that, how would I set up a photo caption over the top of each photo? For example, a simple design that has a semi-transparent black box at the bottom of the photo that accomodates a flexible amount of text for a photo caption?

I’ve watched your slider videos, but haven’t figured this out.

Thank you!

[christian]

Hey @capodanno,

You can start the layout by using the Logo Carousel Slider that is included in Modern Sliders. Just change the data and/or the Dynamic Content setup if needed.

Then, just add a Text element above the Figure element as a caption.

Hope that helps.

[capodanno]

I did see that as an option yesterday. But once I remove the dynamic content, it’s not clear how/what exactly to replace with an image element.

[ruenel]

Hello @capodanno,

Remove the dynamic element and then insert an Image element in each of your slide. Of course, you need to upload the individual images for each of your slides. In your Slider Container settings, do not “Stretch” Align the Layout. Just use “Start” and then have the Adaptive height.

Kindly let us know how it goes.

[capodanno]

I did what you instructed. But I’m still having the same issue with your Logo Carousel Slider (now Section 1) as I did with my original slider starting from a basic template (now Section 2.)

To reiterate, the goal is to have all photos regardless of dimensions be in a slider of only one height, with the width of each image adjusted so the image stays proportional.

To begin toward this goal, I changed the “adaptive” height back to “static” in the slide container settings, as that wasn’t working toward the goal. I started messing around with the max height and auto width of slides, but that didn’t seem to be working. So I will await your advice.

[ruenel]

Hello @capodanno,

Edit your page and click the Logo Carousel (DIV) element.

You need to set the Y overflow to hidden:

And then set a maximum height of 600 pixels so that your slider will have a 600 pixel height regardless of the dimensions of the images in each slides.

Hope this helps.

[capodanno]

I made those changes (to section 1). I also made the same changes to Section 2 as that’s the one I wish to use, ultimately. To be clear, I made your changes to the Content Wrapper DIV in section 2.

As you’ll see, in both sections, the images still do not take up the space properly. I tried playing with different settings on both the slide and the image itself, but couldn’t find the right solution. So, I will await your instruction.

Remember, the goal is for photos to display fully without being cropped. This means I want to show the entire photo. Vertical images will have a narrower slide than horizontal images, to accomplish this, of course.

[christian]

Hey @capodanno,

Starting from my suggestion to use the Logo Carousel here.

1. Disable the Looper Provider and Looper Consumer
2. Duplicate the Slide element
3. Replace the Raw Content with an Image element
4. Set the Image element Object Fit to Contain
5. Set the Image element’s Width and Height to 100%
6. Set the Figure (Div) element’s Height according to what your design requirement
7. Set the Figure element’s Top option to auto
8. Inspect the Slider Container and set the Autoplay to Marquee and Wrap to Carousel
9. Disable the Scroll Effects in the Slide element
10. Duplicate the Slide element
11. Change the Image in the Slide copy

Check the whole process in the video below.

2022 07 24 23h34 31

Thanks

[capodanno]

Thank you! I was able to easily follow your 11 steps and achieve the desired result.

Using this as a learning experience, I especially lack any knowledge about the DIV element. That seems to be where a lot of the magic happens. Do you have a suggested video to learn more about the power of those?

Thanks again!

[ruenel]

Hello @capodanno,

You are most welcome. Check out our Youtube channel for more tips and tutorials:

• https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/featured

Cheers.