Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Cool carousel effect

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #275660
    grimski
    Participant

    I tried to titled this “Carousel hover effect where the active items background-image fills the entire carousel” …it didn’t sound too snappy! So I just went with ‘cool’ ;)

    I stumbled across this carousel and I thought it was very interesting.

    Example: https://www.ktm.com/gb/

    See how when one of the carousel items is interacted with the background changes to fill the entire width of the carousel?

    Has anyone seen this before, it doesn’t look like it’s a plugin and it’s not an example I’ve seen before.

    #275673
    Atelierbram
    Participant

    Nice. Someone had a good time tweaking that slider, adding those hover effects with extra markup.

    #275964
    grimski
    Participant

    I started to try and create a basic version, not sure if I should create a new thread in the JS form though to develop that.

    Anyways, here’s what I have: https://codepen.io/moy/pen/QVvMxo

    I think it’d be good if the images faded in when they’re displayed on hover, maybe once they’ve loaded as they could be quite large (viewport width) but I’m not sure if that’s possible if I’m just changing the img src?

    The image could be a CSS background image if that helped, I think that’s how the original example (https://www.ktm.com/gb) handle it in their carousel.

    Also just noticed an odd visual glitch when hovering off the carousel completely where the text flickers. Looks like it’s to do with the opacity of the images within each panel (item) fading back in – any ideas?

    #275965
    Shikkediel
    Participant

    Here’s some fiddling based on your code, you can preload the images to make sure they’re ready to be shown when hovered:

    $('[data-src]').each(function() {
    
      var img = new Image();
      img.src = $(this).data('src');
    });
    
    $('.carousel__item').mouseenter(function() {
    
      var value = $(this).attr('data-src');
      $('.carousel__bg img').fadeTo(0,0).attr('src', value).fadeTo(500,1);
    })
    .mouseleave(function() {
      $('.carousel__bg img').finish();
    });
    

    Edit – not sure (yet) where the text flicker comes from…

    #275966
    Atelierbram
    Participant

    An alternative version with different markup. Not sure it’s any better, but just some things to consider.

    https://codepen.io/atelierbram/pen/qMXZvp

    #275968
    grimski
    Participant

    Those both work great!

    How are the images preloaded? My only concern would be if that impacted the rest of the page load if there was (for example) 6 items which have 6 large background images. You wouldn’t want these hidden images to be loaded before the other items on the page? Especially on 3/4G connections I guess.

    If an image wasn’t loaded in before it’s relevant item was hovered over I’d be happy adding a class to the container and displaying a loading spinner or something.

    And I suppose if I wanted to ensure all the panel images had faded out first I could always add a .delay to the .fadeIn function?

    The text flicker seems to be to do with this line of CSS:

    .carousel:hover .carousel__image { opacity: 0;}

    Taking it out stops the flicker but it’s a bit odd how just changing the opacity of the images causes that, as it’s not moving anywhere to causes a layout change?

    #275969
    Shikkediel
    Participant

    The first bit caches the images (you don’t have to actually insert them into the DOM apparently) but it isn’t very efficient. One would have to check if they aren’t cached already and do some sort network speed test to optimise it. Other than that, I kinda like Bram’s approach better than my own.

    #275970
    grimski
    Participant

    Yeah I think they both work great, to be honest I don’t know much about preloading images and obviously it’s better and smoother if it displays them without a longer gap. I guess I was just thinking if the images weren’t loaded in under an item was hovered over a spinner would be a good way to indicate something was happening if it took slightly longer to display.

    If all the data-src images are loaded on page load, I guess I’ll just need to check they’re loaded after the rest of the content is first.

    The flicker was just the lack of a z-index on the absolute positioned content div by the looks of it – doh!

    https://codepen.io/moy/pen/MqvmwM

    #275978
    Shikkediel
    Participant

    It seems that using new Image() doesn’t override previous caching so it would just be a matter of whether you want to preload or not (I think you prefer not to, I’m just rectifying my previous claim). A spinner should be fine to, doing a network speed test would be quite circumventive and unreliable. I’ll see if I can come up with an idea involving the spinner.

    #275982
    grimski
    Participant

    Hey, literally just having a play around now as well. I’m open to preloading but just thinking on mobile someone could download a lot of images they don’t need.

    I think a slight delay wouldn’t be an issue. Maybe once all the images have been hovered over it’d be quicker/cached but that’s the next step I think and can wait.

    I was thinking/playing around with adding a class of ‘loading’ onto the container as soon as an item is hovered over and then removing it once the image i ready to load in …the 2nd bit is proving a problem haha but I’m looking into it. Going through the https://www.ktm.com/gb/ script and trying to see how they do it but looks like that uses a lot of node.js.

    #275989
    Shikkediel
    Participant

    Some more fiddling (spinner, no preloading)…

    codepen.io/rZzdqd

    #276040
    grimski
    Participant

    This looks great! I suppose the good with about no preloading (maybe) is it src could like to video and pull that in when needed on hover which could be pretty cool!

    Just out of interesting, when we say ‘no preloading’ does that just mean the images don’t preload on page load. But once they’ve been hovered over there’s a good chance the browser will cache them and load them in quicker the 2nd time?

    #276355
    Shikkediel
    Participant

    Regarding the latter bit… indeed, they should be cached when hovered – until expiration.

    I’m only wondering why it doesn’t always register as cached (using the complete attribute) when it clearly should be, making the spinner sometimes appear briefly when it shouldn’t be necessary.

    #276373
    Shikkediel
    Participant

    Here’s a minor variation that will let the spinner only appear once per page load at most:

    codepen.io/oPoVdE

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘Design’ is closed to new topics and replies.