【问题标题】:JQuery revolution slider link to specific slideJQuery 旋转滑块链接到特定幻灯片
【发布时间】:2019-01-24 14:04:04
【问题描述】:

我在网站上使用 JQuery 旋转滑块。

一切都很好,但我需要一些帮助来链接到特定的幻灯片。

单击导航栏链接后,我希望滑块滚动到特定幻灯片(可能使用 id 或索引)。

我该如何实现?

滑块代码的简化版本如下所示:

<div class="rev-slider-container">
    <div class="rev-slider">
        <ul>
            <li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
                <img src="./images/sketch/galery/1.jpg" alt="slide1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
            </li>

            <li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
                <img src="./images/sketch/galery/1.jpg" alt="slide2" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
            </li>

            <li data-transition="slideup" data-slotamount="5" data-masterspeed="800">
                <img src="./images/sketch/galery/1.jpg" alt="slide3" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">
            </li>
        </ul>
    </div>
</div>

【问题讨论】:

    标签: javascript jquery revolution-slider


    【解决方案1】:

    看看这个https://www.themepunch.com/revsliderjquery-doc/api-methods-events/#methods。

    您可以通过以下方式导航到特定幻灯片:

    revapi.revshowslide(2);
    

    像这样加载滑块后:

    <script type="text/javascript">
    
        var revapi = jQuery(document).ready(function() {
    
            jQuery('#rev_slider_1').show().revolution({
    
                waitForInit: true,
    
                /* SLIDER SETTINGS CONTINUED */
    
            });
        });
    
        // only start the slider once the entire window has loaded
        jQuery(window).one('load', function() {
    
            revapi.revstart();
    
        });
    
    </script>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-05-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-25
      • 1970-01-01
      相关资源
      最近更新 更多