True crossfade - slide fades out and next slide shows/snaps when variable image size

[o-l-e]

Hi,

i was wondering if it is possible to have the "current" slide fade out and the next slide fade in synchronized.

I have a slider with various sized images, and when you are viewing a small image and click next, the next larger slide snaps/shows without any fade. Looks like slide A fades out, and slide B does not fade in just shows.

Is there anything that can be done with this?

Oh, and i also had to use !important statements in the css in order to get the images to be their natural size (not automatically fitting in to the slider frame).

These issues are probably related, but is there any particular reason for why the image sizes can't just have a max-size, instead of filling the slider frame in all directions(stretchy image ratios)?

Thanks anyway for a nice slider :)

[nathansearles]

I just updated crossfade in version 3.0.3. Check it out http://slidesjs.com/examples/basic-fade/.

As for the image question, that's part of a larger issue. It'll be something I'll need to work on for slides with content and images. Which is on the top of my list to build an example of that and work on some fixes to the issues that come up.

[o-l-e]

Hi, and thanks for this, it works nice!

Look forward to a pure css way of scaling the images, i think that would really make this a strong slider. Maybe even have a go at the div around the image, and not just the image. Using a set width/height for the slides would let html content like text etc be added too :)

[o-l-e]

Correction: It does already work with html content with the setup i have :)

[o-l-e]

Hi again, i solved the problem with image stretching/ratio simply by adding a div around each slide. This way the image container is what is stretched, and not the content (images) inside.

Markup:

    <div id="slides">
        <div><img src="img/01.jpg" /><p>This is a caption</p></div>
        <div><h1>This is inline text</h1><p>This is inline text</p></div>
        <div><img src="img/02.jpg" /><p>This is a caption</p></div>
        <div><img src="img/03.jpg" /><p>This is a caption</p></div>
    </div>

CSS:

div.slidesjs-slide > img { max-height: 100%; max-width: 100%; }

I must say that i like the possibility of controlling the image sizes especially because of mobile/retina/etc scripts that use different forms of markup, so probably no point in changing the plugin :)

Thanks again