full size width (browser edge to browser edge) slide show settings

  • Resolved Jessica

    (@terminij)


    12 years, 3 months ago

    Hi, I am trying to make a full width (browser edge to browser edge) responsive slide show. The trouble I am having is with the height and background. I want to add a gradient/color background to my featured div (where the slideshow will be placed) and have the images, using the slide transition, slide from out of the side of the browser window with no margin space on either side. I don’t want it to look like the slides are coming out of thin air. I am also trying to accommodate, as best as possible, the new retina displays, so right now, I am using .png’s the largest possible width of the slideshow screen/browser window (say 2880px wide). I would rather use a waaayyy smaller image, as my images are not necessarily filling the width of the screen but, because the images have to be the same size of the slide show px width in the settings this is the way I have had to set it up. Is there another way to set this up that I am missing? For example if my actual images are really only half the actual browser window width, (which would be at most – figure on the widest screen out there, 2880px by apple, 1440px wide), isn’t there a way to separate the slideshow width from the image width so that I can let the images slide from the actual side of the browser window but yet still show my smaller images (half the screen width) without having to upload such huge .png files for each slide?

    I hope this would be possible, thx so much, If I could get this slideshow to accommodate this somehow, this it would be soooo helpful.

    Jessica

    https://www.ads-software.com/extend/plugins/meteor-slides/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Jessica

    (@terminij)

    ps. you can see what I mean, my site with the slideshow is at https://www.jessicamariedesigns.net
    thank you.

    Plugin Author Josh Leuze

    (@jleuze)

    Hi Jessica, I’m afraid I don’t have a good answer for you. You can use images that are smaller than the slide size, but it will scroll the slide container, not the image.

    I’d conciser some different options. Like setting a max width for the site, anything over 1000-1200px isn’t very practical as far as reading the content goes, the lines of text are too long. Most responsive will have a max and minimum, maybe scaling fluidly between 300px and 1024px or something, and on larger screens there is just more whitespace.

    But that would cause the slides to scroll in out of thin air. You could think about using a vertical scroll, then the width wouldn’t matter since it has a “fixed” height with elements above and below the slideshow for the scroll transition to work with. Another technique that works well with very wide designs is centering a smaller slideshow with the fade transition inside a full width container with a background color or graphic, so that the slides transition to a static background. Then on a narrow screen you see just the slides, and on a wider screen it is still a full width bar, but only the center has the slides.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘full size width (browser edge to browser edge) slide show settings’ is closed to new replies.