Link to specific slide from another page

Question

0.00/5 (No votes)

See more:

I have a slideshow in one of my pages and in each slide of the slideshow there is a link to any other pages of my websites. After navigating to other pages, there is a back button and a next button that can navigate users back to the slideshow. The problem is whenever I click the back button, the slideshow restart from the beginning. I want the slideshow to continue from the point where I stopped without having the slideshow to restart from the beginning every time i navigate to it.

What I have tried:

Javascript

var slideIndex = 1;
var timer = null;
showSlides(slideIndex);

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var indicators = document.getElementsByClassName("indicator");
  if (n == undefined) {
    n = ++slideIndex;
  }
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < indicators.length; i++) {
    indicators[i].className = indicators[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  indicators[slideIndex - 1].className += " active";
  timer = setTimeout(showSlides, 15000);
}

function plusSlides(n) {
  clearTimeout(timer);
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  clearTimeout(timer);
  showSlides(slideIndex = n);
}

HTML

<div class="container">
  <div class="slider">
    <div class="mySlides fade" id="slide1" data-timeout="5000">
      <div class="intro">
        <img src="image/logoGeo.png">
        <h1>Geo Millennium Sdn Bhd</h1>
        <div class="tips">
          <h2>Tips on How to Use This Slideshow:</h2>
          <p>Click on the title in each slides to view more about the services we provide.</p>
        </div>
      </div>
    </div>
    <div id="slide2" class="mySlides fade" data-timeout="5000">
      <a href="webpage/RetainingWall.html">
        <div class="para">
          <p>Retaining Wall</p>
        </div>
      </a>
      <img src="image/wall3.jpg">
    </div>
    <div class="mySlides fade" id="slide3" data-timeout="5000">
      <a href="webpage/SlopeRepair.html">
        <div class="para">
          <p>Slope Repair</p>
        </div>
      </a>
      <img src="image/slope8.jpg">
    </div>
    <div class="mySlides fade" id="slide4" data-timeout="5000">
      <a href="webpage/SteepSlopes.html">
        <div class="para">
          <p>Steep Slopes</p>
        </div>
      </a>
      <img src="image/stepslope1.jpg">
    </div>
    <div class="mySlides fade" id="slide5" data-timeout="5000">
      <a href="webpage/SlopeProtection.html">
        <div class="para">
          <p>Slope Protection</p>
        </div>
      </a>
      <img src="image/image2.jpg">
    </div>
    <div class="mySlides fade" id="slide6" data-timeout="5000">
      <a href="webpage/ReliefStructure.html">
        <div class="para">
          <p>Relief Structure</p>
        </div>
      </a>
      <img src="image/reliefstructure3.jpg">
    </div>
    <div class="mySlides fade" id="slide7" data-timeout="5000">
      <a href="webpage/SoilNailing.html">
        <div class="para">
          <p>Soil Nailing</p>
        </div>
      </a>
      <img src="image/soilnailing9.jpg">
    </div>
    <div class="mySlides fade" id="slide8" data-timeout="5000">
      <a href="webpage/REWall.html">
        <div class="para">
          <p>RE Wall</p>
        </div>
      </a>
      <img src="image/REWall1.jpeg">
    </div>

    <a class="previous" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
    <div class="navigator">
      <span class="indicator" onclick="currentSlide(1)"><h5>Home</h5></span>
      <span class="indicator" onclick="currentSlide(2)"><h5>Retaining Wall</h5></span>
      <span class="indicator" onclick="currentSlide(3)"><h5>Slope Repair</h5></span>
      <span class="indicator" onclick="currentSlide(4)"><h5>Steep Slopes</h5></span>
      <span class="indicator" onclick="currentSlide(5)"><h5>Slope Protection</h5></span>
      <span class="indicator" onclick="currentSlide(6)"><h5>Relief Structure</h5></span>
      <span class="indicator" onclick="currentSlide(7)"><h5>Soil Nailing</h5></span>
      <span class="indicator" onclick="currentSlide(8)"><h5>RE Wall</h5></span>
    </div>
  </div>
</div>

Posted 14-Jul-20 16:11pm

Member 14885909

Updated 15-Jul-20 0:06am

Add a Solution

Comments

Andre Oosthuizen 15-Jul-20 3:33am

Not sure if this will help, forced reload seems to remember the page position, maybe you can use this to show the correct slide image as well - Refresh Page and Keep Scroll Position

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-07-15T00:06:00

Solution 1

Have the back-link append the ID of the target slide to the URL:

HTML

<a href="index.html#slide3">Back</a>

Then use the location.hash property[^] to determine which slide to start on:

JavaScript

var timer = null;
var slideIndex = getInitialSlideIndex();
showSlides(slideIndex);

function getInitialSlideIndex(){
    var index = 1;
    
    var hash = location.hash;
    if (hash) {
        var slideId = hash.substr(1);
        var slides = document.getElementsByClassName("mySlides");
        for (var i = 0; i < slides.length; i++){
            if (slides[i].id === slideId) {
                index = i + 1;
                break;
            }
        }
    }
    
    return index;
}

Posted 15-Jul-20 0:06am

Richard Deeming

Comments

Member 14885909 15-Jul-20 7:56am

@Richard Deeming i tried ur solution but somehow it makes my slideshow skip some slides.

Richard Deeming 15-Jul-20 8:40am

Of course it does. If you want to start the slide-show at slide 3, it has to skip slides 1 and 2.

Member 14885909 15-Jul-20 8:41am

no i mean after that

Member 14885909 15-Jul-20 8:41am

like it can start on slide 3 but it skip to slide 5

Richard Deeming 15-Jul-20 9:01am

Not based on the code you've posted. All you're doing is changing the starting slideIndex; there's nothing that would cause it to skip two slides at once.

Member 14885909 15-Jul-20 9:16am

That's why I think is weird. Your code only involve naming the id, but somehow it affect the slides

Richard Deeming 15-Jul-20 9:21am

Here's a demo, with the timer reduced to make it easier to see, and the starting slide hard-coded to be slide3:
Edit fiddle - JSFiddle - Code Playground[^]

As you can see, no slides are skipped.

Member 14885909 15-Jul-20 9:50am

Have u try clicking the link? Mine happens after clicking the link to slide 3.

Richard Deeming 15-Jul-20 9:52am

Have you tried clicking the link in the demo I posted? It still doesn't skip any slides.

There must be something in your code which you haven't shown here.

Member 14885909 15-Jul-20 9:51am

Maybe u need to try to put a link and try it out. Mine works smoothly before clicking link.

Member 14885909 15-Jul-20 10:02am

wait. I think you misunderstood my question. I want the slide to move smoothly from slide 1 to 8. However, when i click the button in slide 2 which link to another page. That page has a back and next button which when back button pressed, it goes back to the 2nd slide of the slideshow and when next click, it goes to slide 3. Get what i mean?

Richard Deeming 15-Jul-20 10:05am

So you're moving to different slides rather than different pages?

Member 14885909 15-Jul-20 10:26am

Yes

Member 14885909 15-Jul-20 10:28am

What u did is actually correct except for the slide 1 and slide 2 not showing, u managed to navigate to slide 3 when clicking the back button, just that slide 1 and slide 2 not showing throughout the slideshow.

Member 14885909 15-Jul-20 10:31am

I want the slideshow to show slide 1 and 2 after slide 8, but still when pressing back button i can straight navigate to slide 3 instead of restarting the whole slides.