Standard Slider Background

[Alan Cohen]

Jason:

I am using the Standard Slider to create hotel image sliders, and the different sliders have a number of different dimensions (height/width in pixels). Is there a way to limit the grey background for the slide and the transparent background (for the description) to just the width of the widest photo? I am typically using the same width for all photos of a given slide. As you can see in the photo link, both backgrounds are extending beyond that of the photo to the edge of the page. I tried it with and without columns and it does not matter.

http://s27.postimg.org/bzll23sib/SAV_Standard_Slider_Example.jpg

Please let me know.

Thanks,

Topic

[Jason Bobich]

Hello,

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

.standard-slider-wrapper .slides-wrapper { background:transparent; }

The slider is styled in this one place to have the grey background, which encompasses the whole thing. So, in order to make the grey background around a different area, you’ll need to use your inspector and find the other areas of the slider you’d like to apply a background to, instead.

[Alan Cohen]

Jason:

Your suggested code resolved the first part of the problem by removing the grey background behind the images (thanks), but the transparent background for the description and the navigation arrows are both extending beyond the border of the photos. See image link here:

http://s27.postimg.org/4brxlr5ar/SAV_Standard_Slider_Example2.jpg

[Jason Bobich]

There’s no real cut and dry answer for the customization you’re looking to accomplish. In order to use the slider properly, you need to use images that fill the slider in the area you’re using it.

The physical image widths in the slider do not correspond to the width of the overall container. These are responsive elements, which need to fill their parent containers. There’s not going to be any way to adjust the width of the container based on whatever arbitrary image is being displayed. So, I’m not quite sure what approach you’d want to take for your customization.

You could possibly hide the arrow navigation all together from the slider settings. And then from your CSS, you could either remove the background color from the description, or give descriptions some sort of smaller width, opposed to now it’s always going to stretch 100% of the container. These are just ideas.

[Alan Cohen]

Jason:

I get it now. One needs to use the specific sizes in the drop down list of the slider media display in order for everything to work properly. I will either control things with columns (most of my photos are 720 x420, which corresponds to 3/4) or change the slider image widths.

Thanks again.

[Jason Bobich]

One other idea: Using CSS to center the images in the slider could possibly allow it to look a little nicer with having smaller images.

[Alan Cohen]

Jason:

Thanks for the follow up and additional suggestions. The best solution that I found was using the Gallery Slider with thumbnail navigation only – and without alignment or columns. I have over one hundred hotel pages with sliders of varying sizes, and wanted to keep it as simple as possible.

[Jason Bobich]

Yeah, this is a better, more efficient approach for you. I’m trying to sort of push people away from needing to use the sliders plugin, as I continue to update the framework and provide a couple more simplified options for sliders in the theme framework.

[Author]

Replies