0

除了一些控制缩略图外，我正在有效地尝试隐藏 FlexSlider。单击缩略图时，FlexSlider 会淡入并滑动到相应的相应幻灯片。

我遇到的主要问题是当 FlexSlider 被隐藏时，控件也被隐藏了。有没有办法将两者分开，以便我可以永久可见控件（由 FlexSlider 演示中的一系列点表示）？然后我可以附加一个 onClick / fadeIn 处理程序，它可以让滑块转到正确的幻灯片。

我目前正在使用 GitHub 上的“外部脚手架”方法来使用自定义手动控制容器，因为它似乎释放了 slideTo()，我认为这是我的问题所在，但我不是 100% 确定. StephenWil 的这个“外部脚手架”可以在这里找到：https ://github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js

但是，此 ManualControls 方法也适用：jquery Flexslider manual controls is not working

有没有其他人试图达到类似的结果？正如我所描述的那样，我没有找到弹出式滑块，但我认为这是许多人（以及他们的客户！）的理想功能。

我在这个 JS Fiddle 上放了一个运行示例来查看：http: //jsfiddle.net/uxCzq/

您可以在屏幕的左下角看到“点”/导航突出，但是当您隐藏 Slider 时，尽管位于包含 Slider 的 div 之外，导航也会消失。

谁能帮我吗？？我会很感激你的！

4

1 回答 1

3

我一直在客户网站上做一些听起来与您想要达到的效果非常相似的事情。我从与外部控制方法相同的路线开始，但这并没有给我足够的灵活性。

我的解决方案是执行以下操作（抱歉 - 会分叉你的 jsfiddle，但我认为这会更快更干净。

首先设置标记：

<a rel="0" class="slide_thumb" href="#">slide link 1</a>
<a rel="1" class="slide_thumb" href="#">slide link 2</a>
<a rel="2" class="slide_thumb" href="#">slide link 3</a>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="demo-stuff/inacup_samoa.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <a href="http://flex.madebymufffin.com"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
            <p class="flex-caption">This image is wrapped in a link!</p>
        </li>
        <li>
            <img src="demo-stuff/inacup_donut.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
        <li>
            <img src="demo-stuff/inacup_vanilla.jpg" />
        </li>
    </ul>
  </div>

注意链接上的 rel 属性——我们将在下面使用它们。另请注意，值从 0 开始 - 这与幻灯片的值匹配（例如，第一张幻灯片是 0，第二张是 1 等）。

您应该在 CSS 中的 flexslider div 上将可见性设置为无。（一种更方便的方法是使用绝对定位将滑块隐藏在屏幕外，并根据要求将其重新显示，但为了保持简单，我将坚持显示/隐藏）

接下来设置您对 flexslider 插件的调用：

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: false,
        directionNav: true,
        slideToStart: 0,
        start: function(slider) {
            $('a.slide_thumb').click(function() {
                $('.flexslider').show();
                var slideTo = $(this).attr("rel")//Grab rel value from link;
                var slideToInt = parseInt(slideTo)//Make sure that this value is an integer;
                if (slider.currentSlide != slideToInt) {
                    slider.flexAnimate(slideToInt)//move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                }
            });
        }

    });

});
</script>

当用户单击您的链接之一并将滑块移动到正确的位置时，这应该会显示您的幻灯片。这只是一个起点，我应该指出这是我正在使用的代码的一个非常精简的版本，所以这基本上是未经测试的。应该给你一个体面的平台来工作。遇到问题大声喊叫

于 2012-03-28T09:39:36.687 回答