jQuery slider scrolls page up on refresh

1

Hello!

I’m working on my portfolio project.

I’m encountering a problem with my jQuery slider. Every time he refreshs, if you’re “on it” or below it, the page automatically scrolls up to the slider. So if you’re reading something, the page scrolls up and it’s pretty annoying. Also, there is a small issue with the transition of the pictures (they juxtapose).

I’m using Bulma, maybe there is a link to ma problem.

Please look at the project for a more concrete and visual explanation of the issue: https://codepen.io/tanguyLabradorRuiz/pen/YryxaV

2

how about you replace this

$(".multipleslides").each(function() {
  let $this = this;
  $("> :gt(0)", $this).hide();
  setInterval(function() {
    $("> :first-child", $this)
      .fadeOut()
      .next()
      .fadeIn()
      .end()
      .appendTo($this);
  }, 3000);
});

with

$(".multipleslides").slick({
  vertical: true,
  autoplay: true,
  arrows: false
})
1 Like
3

Hey. To answer your question, that would be because the next slide fades in before the other has the chance to fade out; therefore the slider occupies more space and makes the page “jump”. Using the animations’ complete callbacks solves that issue:

  setInterval(function() {
    $("> :first-child", $this)
      .fadeOut(function(){
       // .fadeOut done
        $(this).next()
        .fadeIn()
        .end()
        .appendTo($this);
    })
  }, 3000);
1 Like
4

Thank you!

Finally I’ve decided to drop the slider and use some Bulma tiles, but your answer is still useful!