jQuery FlexSlider隐藏了滑块，但保留了手动控件的可见性 [英] jQuery FlexSlider hide Slider but retain visibility of Manual Controls

问题描述

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

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

我正在使用GitHub上的'External Scaffold'方法，使用自定义手动控件容器，因为它好像释放了slideTo（），我认为这是我的问题所在，但我不是100％确定的。 StephenWil的这个'外部脚手架'可以在这里找到： https：// github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js

但是，此ManualControls方法也适用：

$ b < hr>

有没有其他人试图获得类似的结果？我没有找到弹出式滑块，但我认为它对于很多人（以及他们的客户！）来说是一个理想的功能。

我已经把这个JS小提琴的运行示例检查出来：
http://jsfiddle.net/uxCzq/

您可以在屏幕的左下角看到'dots'/ navigation，但是当您隐藏Slider时，导航也会消失，尽管生活在含有Slider div。

任何人都可以帮助我？我会很感激你的！

解决方案

我一直在客户端上做一些类似于你正在努力实现。我开始采用与外部控制方法相同的方式，但这并没有给我足够的灵活性。

我的解决方案是执行以下操作（对不起 - 将分叉你的jsfiddle，但认为这将更快，更清洁。

首先设置标记：

<$ p $ < code>< a rel =0class =slide_thumbhref =＃>幻灯片链接1< / a>
< a rel =1class = slide_thumbhref =＃> slide link 2< / a>
< a rel =2class =slide_thumbhref =＃>幻灯片链接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>此图片被包裹在链接中！< / 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上将可见性设置为none。 （一种更容易实现的方法是使用绝对定位将滑块隐藏在屏幕外，并根据请求将其重新放入视图中，但为了保持简单，我将坚持显示/隐藏）

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

 < script type =text / javascriptcharset =utf-8> 
 jQuery（document）.ready（function（$）{
 $ b $（'。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）//从链接获取rel值; 
 var slideToInt = parseInt（slideTo）//确保此值为整数; 
 if（slider.currentSlide！= slideToInt）{
 slider.flexAnimate（slideToInt）//移动滑块（除非滑块已经显示我们想要的幻灯片）; 
} 
}）; 
} 
 
}）; 
 
}）; 
< / script> 
  

当用户点击其中一个链接并将滑块移动到正确的位置。这只是一个起点，我应该指出这是我正在使用的代码的一个非常简化的版本，所以这基本上是未经测试的。应该给你一个体面的工作平台。如果遇到问题，大声呼叫

I'm effectively trying to have the FlexSlider be hidden, except for some controlling thumbnails. When the thumbnails are clicked, the FlexSlider fades in and slides to the appropriate corresponding slide.

The main problem I'm having is that when the FlexSlider is hidden, the controls are hidden as well. Is there a way to separate the two, so that I can have the controls (represented by a series of dots in the FlexSlider demo) by permanently visible? I could then attach an onClick / fadeIn handler that coul have the slider go to the correct slide.

I'm currently using the 'External Scaffold' method, found on GitHub, to use a custom Manual Controls container, because it seems like it freed slideTo(), which I think is where my problem lies, but I am not 100% sure. This 'External Scaffold' by StephenWil can be found here: https://github.com/stephenwil/FlexSlider/blob/master/jquery.flexslider.js

However, this ManualControls method also works: jquery Flexslider manual controls is not working

---

Has anyone else been trying to achieve a similar result? I've not found a pop-up slider as I am describing but I think it is a desired functionality for many people (and their clients!).

I've put a running example on this JS Fiddle to check out: http://jsfiddle.net/uxCzq/

You can see the 'dots'/navigation poking out at the bottom-left hand side of the screen, but when you hide the Slider, the navigation also disappears despite living outside the containing Slider div.

Can anyone help me out?? I would be indebted to you!

解决方案

I've been doing something on a client site that sounds very similar to the effect that you're trying to achieve. I started off on the same route you have with the external controls method but that didn't give me quite enough flexibility.

My solution was to do the following (sorry - would have forked your jsfiddle but figured this would be quicker and cleaner.

First set up markup:

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

Note the rel attribute on the links - we'll use them below. Also note that the values start from 0 - this matches the values for the slides (e.g. the first slide is 0, the second is 1 etc).

You should set the visbility to none on the flexslider div in your css. (a more accessible way to do this would be to hide the slider offscreen using absolute positioning and bring it back into view on request but in the interests of keeping things simple I'll just stick to show/hide)

Next set up your call to the flexslider plugin:

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

This should show your slide when the user clicks on one of your links and also move the slider to the right position. This is just a starting point and I should point out this this is a very stripped down version of the code I'm using so this is basically untested as is. Should give you a decent platform to work from though. Shout if you run into problems

这篇关于jQuery FlexSlider隐藏了滑块，但保留了手动控件的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！