What is the best way to navigate from one div to a particular slide within a slider?

Let's say I have two web pages: index.html and page.html. On page.html, there is a slider with 9 slides created using the plugin StackSlider. Now, when a link on index.html is clicked, I want to navigate to a specific slide, like slide number 4, on page.html.

How can I achieve this?

I attempted the following method but it didn't work as expected

This is the code in my index.html file

<body>
  <a href="page.html#one">Go to the 1st slide on page.html</a>
  <a href="page.html#two">Go to the 3rd slide on page.html</a>
</body>

This is a snippet of the code in page.html

<section class="main">
  <ul>
    <li id="one">
      <img src="images/1.jpg" />
    </li>
    <li>
      <img src="images/2.jpg" />
    </li>
    <li id="two">
      <img src="images/3.jpg" />
    </li>
    <li>
      <img src="images/4.jpg" />
    </li>
  </ul>
</section>

Answer №1

If StackSlider is not functioning correctly with the provided parameter, you may need to make a slight adjustment.

To resolve this issue, navigate to the _init function within jquery.stackslider.js file and replace the line: this.current = 0; with the following: if(!this.options.current) this.current = 0; else this.current = this.options.current-1;

By doing this, you can now specify the initial parameter for the slide to display.

Your updated html code should look like this:

 <a href="page.html#1">go to the 1st slide of page.html</a><br>
    <a href="page.html#2">go to the 2nd slide of page.html</a><br>
    <a href="page.html#3">go to the 3rd slide of page.html</a>

With these changes, your page.html will appear as follows:

 <ul id="st-stack" class="st-stack-raw">
            <li id = "1">
                <div class="st-item"> <a href="http://drbl.in/fgQV"> <img src="images/fl1.jpg" /> </a> </div>
                <div class="st-title">
             image1
                </div></li>
                    <li id=2><div class="st-item st-center"> <a href="http://drbl.in/fgQV"> <img src="images/fl2.jpg" /> </a> </div>
                        <div class="st-title">
                        image2
                        </div></li>
                     <li id = "3"><div class="st-item"> <a href="http://drbl.in/fgQV"> <img src="images/fl3.jpg" /> </a> </div>
                        <div class="st-title">
                        image3
                        </div></li>

            </ul>

<script type=text/javascript>
  //passing parameter from hash
  var img2show = parseInt((location.hash || 5).split('#')[1]);
        $( '#st-stack' ).stackslider({"current":img2show});

    </script>

Answer №2

The issue lies in the plugin's inability to read the hash value, resulting in it not functioning properly. However, you can resolve this by passing the desired slide along with the hash to the plugin through the start options. Here's an example:

var start = location.hash || 5;

$('#st-stack').stackslider({
  start: start
});
<link href="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/js/modernizr.custom.63321.js"></script>
<script type="text/javascript" src="https://rawgit.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/js/jquery.stackslider.js"></script>

<section class="main">
  <ul id="st-stack" class="st-stack-raw">
    <li>
      <div class="st-item">
        <a href="http://drbl.in/fgQV"><img src="//tympanus.net/Development/StackSlider/images/1.jpg" /></a>
      </div>
      <div class="st-title">
        <h2>Graverobber</h2>
        <h3>by Isaac Montemayor</h3>
      </div>
    </li>
    <li>
      <div class="st-item">
        <a href="http://drbl.in/fpRz"><img src="//tympanus.net/Development/StackSlider/images/2.jpg" /></a>
      </div>
      <div class="st-title">
        <h2>Hideous Snake Queen</h2>
        <h3>by Isaac Montemayor</h3>
      </div>
    </li>
    <li>
      <div class="st-item">
        <a href="http://drbl.in/fGVs"><img src="//tympanus.net/Development/StackSlider/images/3.jpg" /></a>
      </div>
      <div class="st-title">
        <h2>Queen of Hearts</h2>
        <h3>by Isaac Montemayor</h3>
      </div>
    </li>
    // more list items omitted for brevity
  </ul>
  <p>Tip: to see a continuous flow, keep your mouse pressed on the navigation arrows.</p>
</section>

I used 5 as the default value for demonstration purposes, but in your project, if you redirect the user with the slide in the hash, the plugin will function correctly without the default value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you use JavaScript and regex to extract the word before a comma?

Hey there, I'm attempting to extract the word right before a comma in a sentence. For instance, consider the following string: "Cloudy, and 51 ° F " I aim to retrieve CLOUDY as the output. Could someone guide me on how to achieve this using regex ...

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

Conceal button with CSS when text is brief or character count is restricted

Employing solely CSS code, I have successfully implemented a feature to display and hide full paragraphs. The code snippet below demonstrates its functionality. However, the issue arises when the "Show More" button is visible even for short paragraphs that ...

reversed json using javascript

Is it possible to efficiently reverse the order of the following JSON object: { "10": "..." "11": "...", "12": "...", "13": "...", "14": "...", } so that it becomes: { "14": "...", "13": "...", "12": "...", "11": "... ...

Develop a dynamic daily messaging system

I'm interested in incorporating a daily changing message feature on my website. My plan is to store all the messages in a MySQL database and have them displayed daily. Any guidance on how to achieve this would be highly appreciated! Thank you, I ha ...

Icons that are clickable in ionic

I have successfully created a list card with 2 icons in each row. However, I am facing a challenge in making these icons clickable without disrupting the layout of the list. I attempted to add an ng-click to the icon element, but it did not work as expecte ...

What is the best way to eliminate the excess height in my <li> element?

I'm a little unsure about how to articulate my question, so I'm just going to share the code: body { background-color: #232026; background-image: url('galaxy16cropped.jpg'); background-position: center top; background-repeat: ...

What is the reason behind Selenium not utilizing JavaScript?

I've been a beginner in the world of Javascript for a while now, with my main goal being to use it for creating Selenium automations as part of my journey into QA automation. However, I find myself quite perplexed when it comes to the language. In al ...

Error when accessing YouTube API Credentials - TypeError occurred: Unable to retrieve property '0' as it is undefined

I have encountered an issue with the YouTube API Browser key. I have two keys at my disposal, one that I created recently and another from a sample project where I obtained the code. The problem arises when I try to use my own key, as it seems to be ineffe ...

The grayscale effect is not functioning on the default web browser of an Android device

I have implemented a grayscale effect for an image using the following CSS code snippet: img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\&apo ...

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

An error in PHP has been detected within the CodeIgniter framework

I have encountered an error that has been frustrating me lately: An unexpected PHP Error occurred with the following details: Severity: Warning Message: strip_tags() expects parameter 1 to be string, array given Filename: inscription/loginform3.php Line ...

Learn how to use AJAX functions in CodeIgniter to modify webpage data efficiently

I currently utilize CodeIgniter as my chosen web framework. In the controller, I initiate $this->load->view('Apartments_Hotels', $data) to load the initial data. However, I am now faced with the task of dynamically reloading the page with u ...

Mongoose virtual population allows you to fetch related fields

When attempting to utilize virtual populate between two models that I've created, the goal is to retrieve all reviews with the tour id and display them alongside the corresponding tour. This is achieved by using query findById() to specifically show o ...

Troubleshooting Z-Index problem with Material UI Drawer component on iOS

I'm currently working on a project that involves the use of the Material UI Drawer component. However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar ...

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

The request from localhost:3000 to localhost:3003 could not be proxied by ReactJS

Currently, I am working on developing a Single Page Application (SPA) using create-react-app with an expressjs server as the backend. During development, my frontend test server runs on port 3000 while my backend expressjs test server runs on port 3003. T ...

What causes the size of an image to decrease when placed within an anchor tag?

Trying to add clickable social media icons, but when wrapped in an anchor tag the images shrink significantly. <span class="iconspan"> <a href="https://www.instagram.com/lil_ijoez/" target="_blank" ...

Tips for incorporating a transition effect on group hover using Tailwind CSS

I've been working on creating a cool animated transition effect for my button where a chevron icon appears when the user hovers over it. I'm currently developing the website using NextJS and TailwindCSS, and I've implemented a group hover fe ...

I am having trouble with my jquery.ajax configuration where the async parameter is set to true. The data is not being sent back to

My goal is to save content whenever a button or hyperlink is clicked using jquery.ajax in an Asp.net 3.5 environment. Here is the logic I am following: I use .bind in jquery to attach my custom method(MakeLog) to a button click or hyperlink click. Sinc ...