如何从一个div转到滑块中的特定幻灯片？

Question

Suppose i have two pages. 假设我有两页。 One is index.html and another is page.html . 一个是index.html ，另一个是page.html 。 In page.html i have a slider which has 9 slides (using the plugin StackSlider ). 在page.html中，我有一个带有9个幻灯片的滑块（使用插件StackSlider ）。 Now, when i will click in a link in index.html , i want to go to a specific slides say slide no 4 in page.html . 现在，当我单击index.html中的链接时，我想转到特定的幻灯片，例如page.html中的幻灯片4。

How can i do that? 我怎样才能做到这一点？

I tried the following but it did not work 我尝试了以下操作，但没有成功

Here is my index.html code 这是我的index.html代码

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

Here is part of code for page.html 这是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

The plugin is not reading the hash value, that's why it's not working. 该插件未读取哈希值，这就是为什么它无法正常工作的原因。 BUT, you can pass the wanted slide with the hash and pass it to the plugin via the start options. 但是，您可以将所需的幻灯片与哈希一起传递，并通过start选项将其传递给插件。 Something like this: 像这样：

 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> <li> <div class="st-item"> <a href="http://drbl.in/fgvZ"><img src="//tympanus.net/Development/StackSlider/images/4.jpg" /></a> </div> <div class="st-title"> <h2>Dead Pirate vs Kraken</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fyfM"><img src="//tympanus.net/Development/StackSlider/images/5.jpg" /></a> </div> <div class="st-title"> <h2>Mountain Lion</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fCmJ"><img src="//tympanus.net/Development/StackSlider/images/6.jpg" /></a> </div> <div class="st-title"> <h2>Flying Skull</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fsMv"><img src="//tympanus.net/Development/StackSlider/images/7.jpg" /></a> </div> <div class="st-title"> <h2>The Fly &amp; Bureaucratic Elephant</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fGOf"><img src="//tympanus.net/Development/StackSlider/images/8.jpg" /></a> </div> <div class="st-title"> <h2>Failsnake</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fypr"><img src="//tympanus.net/Development/StackSlider/images/9.jpg" /></a> </div> <div class="st-title"> <h2>Cultist</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fEmG"><img src="//tympanus.net/Development/StackSlider/images/10.jpg" /></a> </div> <div class="st-title"> <h2>Crusader &amp; Viking</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/ffiw"><img src="//tympanus.net/Development/StackSlider/images/11.jpg" /></a> </div> <div class="st-title"> <h2>Crocodile</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fqWx"><img src="//tympanus.net/Development/StackSlider/images/12.jpg" /></a> </div> <div class="st-title"> <h2>Captain Banana</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fkuv"><img src="//tympanus.net/Development/StackSlider/images/13.jpg" /></a> </div> <div class="st-title"> <h2>Werewolf</h2> <h3>by Isaac Montemayor</h3> </div> </li> <li> <div class="st-item"> <a href="http://drbl.in/fIli"><img src="//tympanus.net/Development/StackSlider/images/14.jpg" /></a> </div> <div class="st-title"> <h2>Vegetables</h2> <h3>by Isaac Montemayor</h3> </div> </li> </ul> <p>Tip: to see a continuous flow, keep your mouse pressed on the navigation arrows.</p> </section>

I just put 5 by default so you could see the effect but in your project, if you will redirect the user with the slide in the hash it will work for you without the default value. 我只是默认设置为5，这样您就可以看到效果了，但是在您的项目中，如果您将用户与hash的幻灯片一起重定向到用户，它将在没有默认值的情况下为您工作。

Answer 2

StackSlider cannot work with given parameter ,so you should 'fix it a little bit. StackSlider无法使用给定的参数，因此您应该对其进行一些修复。

go to function _init within jquery.stackslider.js and instead of row: this.current = 0; 转到jquery.stackslider.js中的函数_init而不是行：this.current = 0; place following: if(!this.options.current) this.current = 0; 放置在以下位置：if（！this.options.current）this.current = 0; else this.current = this.options.current-1; 否则this.current = this.options.current-1;

now you can pass initial parameter of which slide to show. 现在，您可以传递要显示的幻灯片的初始参数。

now your html should look like so-> 现在您的html应该看起来像这样->

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

and your page.html will look like--> 和您的page.html将看起来像->

 <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>

如何从一个div转到滑块中的特定幻灯片？

问题描述

2 个解决方案

解决方案1
0 2018-05-13 13:06:56

解决方案2
0 已采纳 2018-05-13 14:44:10

如何从一个div转到滑块中的特定幻灯片？

问题描述

2 个解决方案

解决方案1 0 2018-05-13 13:06:56

解决方案2 0 已采纳 2018-05-13 14:44:10

解决方案1
0 2018-05-13 13:06:56

解决方案2
0 已采纳 2018-05-13 14:44:10