Why not use div wrappers? about cato.js HOT 7 CLOSED

Hi @siteit,

thank you for your request, I'll have a look at it.

This should be relatively easy to implement the only thing to do is to change how the images get selected, see:
https://github.com/herrfugbaum/cato.js/blob/master/src/cato.js#L26-L27

An option would be to select the images by class names, but that would be a breaking change...

from cato.js.

Can be ignored

See two answers below

Below the line is the old answer for the archives

@siteit I made a version that does no longer assume a certain HTML structure inside the "cato" div itself, so you should be able to wrap the images and put other elements inside the wrapper as well.

But cato still assumes that there are two images in the slider div, so if you add other images you will get unexpected results.
Also you have to take care of the styling of your new elements for your self as they will most likely conflict with the styles of the slider.

Example:

<div id="my-slider">
    <div class="wrapper">
        <img src="" alt="" />
        <p>Lorem Ipsum</p>
    </div>
    <div class="wrapper">
        <img src="" alt="" />
        <p>Lorem Ipsum</p>
    </div>
</div>

Here is a demo for you:
https://codepen.io/slamcode/pen/GeKwwv

Source can be found in the wrappable-images branch

Please have a try and tell me what you think and if you find any bugs!~~

from cato.js.

Can be ignored

See the answer below

Below the line is the old answer for the archives

Now that I start to think about it I can think about a new bug this solution will introduce... now cato assumes that the elements to slide are images, when it was coupled to the dom structure it didn't care about which elements to slide just their positions.

So I'm not really happy with this solution ... maybe we can find something better :)

from cato.js.

Well actually I think we don't even need a new version for this. 🤣
When I tried to come up with a solution for the new bug I remembered that cato is capable of all this stuff anyways (It has been too long since I was working on this). 😄

The good thing is cato doesn't make any assumption on what you want to slide / compare... it just assumes that there are two elements inside of the cato wrapper...

So nothing stops you from doing something like this:
https://codepen.io/slamcode/pen/gEYqdp

(Image 1 is done via img tag, Image 2 is done as a background image to show off the flexibility).
This way you can do whatever you want inside the cato wrapper, just make sure you have two elements in there.

Additional benefits are that your resulting CSS will be much simpler than with the proposed solution in #18 I will therefore close my PR 😛

Does this approach suit you?

from cato.js.

I'm closing this now. Feel free to reopen it if you have further questions!

from cato.js.

Hi

I just had a go at using this with two iframes. First thing I've noticed is that it doesn't seem to work in the horizontal direction. Same is true for the above Codepen.

from cato.js.

Hi @smth,

sorry for the late reply...
can you show me an example with iframes please? Maybe I can figure it out :)

from cato.js.