When resize destroy slide and show each image

[brunogiliberto]

Hi there,

I know that is very rare, but I want to show a slider on a desktop version and when resized to mobile version show each image separately, like in a gallery. is that possible?

http://weddings.brunogiliberto.com

Thanks in advance

[walkoffhomerun]

i did the exact same thing on my existing website. on desktop screens i have slider pro working and on mobile i turn it off and have a separate div with smaller images loaded. so you create 2 sections the way i did it and with CSS you turn off the mobile display div when on desktop size screens and you turn off desktop display div when on mobile screens.

Here is my working version of my current website but i am about to change this website so not sure how much longer this example will be available: http://www.investorconstruction.com/properties/14127_Tanglewood.html You can open the page coding the also open the inspector screen in your browser and look at the css controlling this.

so here is my basic div layout:

<div class="desktop_only_displays">
     <div id="example2" class="slider-pro">
    <div class="sp-slides">
       <div class="sp-slide">
        <img class="sp-image" src="1x1-Wht.gif" data-src="your_fullsize_image.jpg" alt="image description">

..... more images
   </div>
</div>

<div id="mobile_only_displays">
         <img src="image1.jpg" alt="image description">
     <img src="image2.jpg" alt="image description">
         ..... more images
</div>

then with @media queries based on screen size you turn on and off the 2 div holders "desktop_only_displays" and "mobile_only_displays"

this area of a CSS file will turn OFF desktop display and turn on the mobile display div

@media only screen and (max-width: 479px)
.desktop_only_displays {display: none !important}
#mobile_only_displays {display: block;}

please note that for whatever reason the desktop display div is div "class" and the mobile display is a div "id" in my coding. you may or may not need to do that.

this area of a CSS file will be the default for leaving the desktop display on and active but turn OFF the mobile display. Notice there is NO @media query because it is full screen and you want the mobile display OFF at all times UNLESS in my example you hit 479 pixels or less which is the @media query shown above #mobile_only_displays {display: none;}

you can set the @media screen size wider if you want individual images shown for table devices. also, notice i do NOT use the standard arrows that came with slider pro. David, the designer, showed me a way to swap those out for a font awesome or any other font icon and then i outlined those arrows. so it pops more and you can see it both on bright or white images as well as dark images.

There is a problem with this option is that it bloats the page with extra code. you are entering in the photos 2x and increasing the amount of code on the page. just make sure your hosting company has compression turned on and it gzips your page to reduce its file size and load times. also, there is another major problem if you have alot of images.......there is NO lazy loading of the small images. so all of those image will load up front. that is why i used smaller images to reduce file size. There is a way to lazy load images like this but you can look online for solutions. slider pro i believe has this turned on by default so you reduce page loading times if you only use slider pro.

I did NOT choose to lazy load my small images for mobile screen sizes and it was OK. I even have 30-50 images on each page so it is an issue but if you make your images close enough to the screen size and optimize the images you will take alot of size out of the download and speed up page load times. I chose 479 pixels for the image size and used 450 pixel wide images to fit inside that screen without have to downscale a larger image which requires a larger file size for each image.

[brunogiliberto]

Thanks a lot for your time @walkoffhomerun. But in my case I have information in each image on my slide (like titles) and I don't want to have extra code and upload the info two times. With your option in my case is probably better to have another template for mobile devices but google already said that if your web isn't responsive the will not publish it on their list.

So I'm still waiting if there is any option to split the slide and show every image separately as I'm repositioning slides and adding or subtracting pictures very often.

If you can see my website I just have one big slide :)

[davidghi]

Hi. You can use CSS to modify the layout of the slider on smaller screens. Here's an example:

@media(max-wdith: 500px) {
    .sp-slide {
        left: 0 !important;
        position: relative;
        height: auto !important;
        margin-bottom: 10px;
    }

    .sp-slides {
        transform: translate3d(0px, 0px, 0px) !important;
    }

    .sp-mask {
        height: auto !important;
    }

    .sp-image {
        max-width: 100% !important;
        height: auto !important;
    }

    .sp-image-container {
        height: auto !important;
    }
}

Cheers!

[brunogiliberto]

Hello @davidghi , thank you very much! looks perfect but I'm missing the titles and other layers that I have active on the slider. There's any way to keep the titles related with each image?

cheers!!

[davidghi]

Currently the layers appear only for the slide that is selected. If you want to make them visible for all the slides, you should replace sp-animated with sp-static.

Cheers!

[brunogiliberto]

@davidghi and I have to change the layer settings manually one by one? can I doit via CSS?

cheers!

[walkoffhomerun]

bruno.....did this create the "gallery" style layout page you originally asked about? can you give the demo page so we can look at it? i clicked on your original link in the original post and it still shows 1 slider for all screen widths and not individual images

[brunogiliberto]

yes, sorry, the url is for now:

http://weddings.brunogiliberto.com/scroll/

Thank you! _

[davidghi]

You can search&replace them all at once; most editors have something like this. It's important to actually replace 'sp-animated' with 'sp-static' because that class is an indicator for how the layer will be handled in the JavaScript code.

[brunogiliberto]

thank you very much, that resolved my problem. :)

_