Get smooth scroll to slide on another page using Swiper

Question

When I click the button 'back' on a certain page, it goes back to the page with a swiper and to that slide within a swiper (the button has an anchor and the slides within the swiper have data-hash attribute). The only problem is that it shows the first slide for a millisecond and then jumps to the desired slide. That's because it's not the swiper that controls the sliding to the slide, but just the regular hash that makes it jump to the section.

When I click on the back button, I want to add a smooth scroll to the desired slide (which is on another page), not just an instant jump. That's why hash is useless in this case, so here's what I did:

var projects = ["Project 1", "Project 2", "Project 3", "Project 4"];

$(document).ready(function() {

  var swiper = new Swiper('.swiper', {
    // parameters
  });

  $(".back").click(function redirect() {
    window.location.replace('../portfolio.html?swiper=slideTo');
  });

  var button = $(".back")[0].id;
  var replace = button.replaceAll("-", " ");
  var number = projects.indexOf(replace);

  if (new URLSearchParams(window.location.search).get('swiper') === 'slideTo') {
    swiper.slideTo(number); // if I put the fixed number, it would work, but only if I remove these 3 variables above
  };

});

<button class="back" id="Project-1" onclick="redirect()"></button> // one page

<div class="swiper-slide" data-hash="project-3"></div> // another page

The thing now is that those 3 groups of code work well alone, but not together. To be more precise, these 3 variables used to extract a number, somehow block the last condition, even if I put the fixed number in slideTo(), it doesn't work, until I remove the variables above. Obviously I don't want a fixed slide number, but a number based on hash, that's why I made an array of the project names, searched the array for a match using button id and extracted that number, and then forwarded it to slideTo(). It just doesn't work and I can't find a reason why.

Answer 1

that's ok let me see if I can help you,

first, add css to hie the slider

.mySwiper{
  display:none
}

then you can check if the hash is present and act accordingly

  const hasHash = window.location.hash ? true : false;
  //Use to see hash value
  console.log(window.location.hash.substring(1));
  if (hasHash) {
    $(".swiper").hide();
    setTimeout(function () {
      swiper.slideTo(window.location.hash.substring(1));
      $(".swiper").show();
    }, 175);
  } else {
    $(".swiper").show();
  }

I knocked up a codepen demo for you: https://codepen.io/ptahume/pen/jOzZeVb?editors=1111

although because it's codepen its a bit flaky because seems to only reliably work if the codepen console is open and the page seems to need a moment to load twice because that's just codepen for you but it sort of demonstrates the concept

I hope this helps

Answer 2

are you using hash or query string parameters ?

If you want the hash then

window.location.hash.substring(1)

will give you any value after the hash so if your url was:

http://example.com/MySwiperPage#123

then that would give 123 as the value that the ```swiper.slideTo''' can use, e.g

swiper.slideTo(window.location.hash.substring(1));

but in the amended code above it seems your using query string paramaters ?

...?swiper=slideTo

this is not the same as a hash, if you want to use query string parameters then

function GetQueryStringParams(sParam)
{
    let sPageURL = window.location.search.substring(1);
    let sURLVariables = sPageURL.split('&');

    for (let i = 0; i < sURLVariables.length; i++)
    {
        let sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

if your url was like so:

http://example.com/MySwiperPage?SwipeTo=123

use call the above function like so

var SwipeToNumber = GetQueryStringParams('SwipeTo');

you ideally want to pass a number in the url using hash or query string and then use that number to select the slide you want to jump to

don't know why you need an array or button Id's if you know how many slides you have then you just need to set the slide number to jump to on the back button using the hash or query string parameters

if you really want to use button id then

 var button = $(".back")[0].id;
  var replace = button.replaceAll("-", " ");
  var number = projects.indexOf(replace);

Your code is only ever getting the first button id value and removing the "-" and replacing it with a space which I suspect is making it a none numeric value, ensure the value is a number, you may want to use parseInt and repace the " " with "" to remove the white space

 var button = $(".back")[0].id;
  var replace = button.replaceAll("-", "");
  var number = projects.indexOf(parseInt(replace));

but this in itself will only use the first button Id, if you wanted to search your array or find an id button, again you would need to read in the hash value or query string value to tell the script what your looking for and if your going to do that then you might as well get rid of the array and simply use the value passed to the page directly

I hope this makes sense?

Answer 3

Thanks to @Patrick Hume, I managed to solve the problem. When redirecting to the location and adding parameters in the URL, I immediately added the number as well. That way, the slide number is passed on another page and we have the information we need.

Now, on the swiper page, we extract that number from the URL and go to the desired slide.

var projects = ["Project 1", "Project 2", "Project 3", "Project 4"];

$(document).ready(function() {

  $(".back").click(function redirect() {
    var button = $(".back")[0].id;
    var replace = button.replaceAll("-", " ");
    var number = projects.indexOf(replace);
    window.location.replace('../portfolio.html?SlideTo=' + number);
  });


  if (new URLSearchParams(window.location.search).has('SlideTo')) {
    var location = window.location.search.split("=").pop();
    swiper.slideTo(location);
  } else {
    swiper.slideTo(1);
  }

});

<button class="back" id="Project-1" onclick="redirect()"></button> // one page

<div class="swiper-slide"></div> // another page