Img Sticky in Swiper Container

[ooumaoo]

Hello there,

here is my first post, I hope I am not doing it wrong.

I need help to change some CSS in a WordPress website.

Here is the page : https://camilleberlande.com/portfolio/allure-exotique/

In the slider with the images just under the texte,
I would like to make the 2 arrow images (left and right) sticky inside the space of the swiper container.

To make it clearer, I would like to make the arrows sticky from the top of the image to the bottom.

I tried some “sticky” code but I miss something.

Right now, the arrows are in an absolute position at 50% of the swiper container.
I would like them to be sticky from 1 to 100%.

Thanks for your help.

[Shikkediel]

Never mind… I didn’t understand the intention but I think I do now.

Seems to me you need some JavaScript for it… I’ll see if I can come up with something.

[Shikkediel]

Quite a bit of work… maybe you could give a sign of interest before I do any serious coding. Often people don’t respond, making the effort somewhat pointless.

[ooumaoo]

Hello shikkediel,

Yes of course. I really need to find a solution so I followed the post but here where I live its 1:29am ;)

Did you understand what I meant ? Sorry english is not my motherlanguage, I tried my best

[Shikkediel]

Okay, here’s a bit of script. I made it slightly different from what you described – it becomes sticky once the image is halfway scrolled out of the screen (to the point where the buttons are). The arrows will be sticky on the lower half of the image. You could do the “1-100%” effect too but you’d have to move the arrows to the top. In the current setup, this seems more natural. It looks a bit odd because the buttons have transition applied to them, you might want to remove that rule if it’s not needed for anything else.

jQuery(window).on('load', function() {

    var wrap = jQuery('.arrow-closest .container'),
    button1 = jQuery('.swiper-arrow-left'),
    button2 = jQuery('.swiper-arrow-right'),
    knobs = button1.add(button2),
    crest, align, facet;

    jQuery(this).resize(checkPosition).scroll(adaptArrow).resize().scroll();

function checkPosition() {

    crest = wrap.height();
    align = button1.offset().left;
    facet = button2.offset().left;
}

function adaptArrow() {

    var spot = wrap[0].getBoundingClientRect().top;

    if (spot < 150-crest/2 && spot > button1.height()+110-crest) {
      knobs.css({position: 'fixed', top: 150});
      button1.css('left', align);
      button2.css('left', facet);
    }
    else knobs.attr('style', '');
}
});

[ooumaoo]

Thanks a lot, I ll try it tomorrow as I cant today

Very nice of you
I really have to learn some JavaScript

[Shikkediel]

Glad to help. I tested it on your site but let me know if you run into issues with it.

[ooumaoo]

Okay I am not very familial with javascript so I have some research to do first to be able tu use it properly… I tried to use a plugin to insert some Javascript codes in the header or footer and it didn’t work but I am pretty sure it’s something I did wrong,
coming back to you asap

[Author]

Posts