Ninja滑块暂停幻灯片与缩略图

时间:2016-07-21 06:55:09

标签: javascript jquery html css slider

我在我的网站上使用此滑块

http://www.menucool.com/slider/flickr-like-slideshow

我遇到播放/暂停滑块功能问题。 缩略图和上面的图像是分开的,都有自己的js。 有按钮可以分别暂停幻灯片和缩略图。

我必须点击暂停幻灯片放映,然后点击另一个按钮暂停缩略图。

任何组合两个按钮的方法?

因此无需单击两次即可暂停滑块。

<div id="ninja-slider" class="myslider">
    <div>
        <div class="slider-inner">
            <ul>
                <li>
                    <a class="ns-img" href="img/image1.jpg"></a>
                </li>
                <li>
                    <a class="ns-img" href="img/image2.jpg"></a>
                </li>
            </ul>
            <div id="ninja-slider-pause-play"></div>
        </div>
        <div id="thumbnail-slider">
            <div class="inner">
                <ul>
                    <li>
                        <a class="thumb" href="img/image1.jpg"></a>
                    </li>
                    <li>
                        <a class="thumb" href="img/image2.jpg"></a>
                    </li>
                </ul>
                <div id="ninja-slider-pause-play"></div>
            </div>
        </div>
    </div>
</div>

Ninja Slider js

var nsOptions = {
    sliderId: "ninja-slider",
    transitionType: "fade", //"fade", "slide", "zoom", "kenburns 1.2" or "none"
    autoAdvance: true, //If autoAdvance is required, don't set this to true. You can set the autoAdvance of the Thumbnail Slider to true because the "before" callback function listed below has been set to let this slider to be driven by the Thumbnail Slider.
    delay: "default",
    transitionSpeed: 600,
    aspectRatio: "2:1",
    initSliderByCallingInitFunc: false,
    shuffle: false,
    startSlideIndex: 0, //0-based
    navigateByTap: false,
    keyboardNav: false,
    before: function (currentIdx, nextIdx, manual) { if (manual && typeof mcThumbnailSlider != "undefined") mcThumbnailSlider.display(nextIdx); },
    license: "b2e98"
};

缩略图滑块Js

var thumbnailSliderOptions = {
    sliderId: "thumbnail-slider",
    orientation: "horizontal",
    thumbWidth: "138px",
    thumbHeight: "110px",
    showMode: 3,
    autoAdvance: true,
    selectable: true,
    slideInterval: 3000,
    transitionSpeed: 700,
    shuffle: false,
    startSlideIndex: 0, //0-based
    pauseOnHover: true,
    initSliderByCallingInitFunc: false,
    rightGap: null,
    keyboardNav: true,
    mousewheelNav: true,
    before: function (currentIdx, nextIdx, manual) { if (typeof nslider != "undefined") nslider.displaySlide(nextIdx); },
    license: "b2e98"
};

0 个答案:

没有答案