Question

我正在使用Flexislider来滑动我的图像。

我的HTML代码是：

    <ul class='slides'>
    <li class="slide-two" >
        <div class="flex-div slide-stones2">
          <div class="slide-footsteps"> 
            <p>
                <span class="brown-bg">Take the steps to be who you want to be...</span>
            </p>
          </div>
          <div class="backstretch"> 
                     <img  src="img/massage-slider/slide-footsteps.jpg"/>
              </div>
       </div>
    </li>
 <ul>

我正在尝试添加这样的选择器：

$(document).ready(function() {
                $('.flexslider').flexslider({
                    selector : ".slides>li>div>div>img",
                    animation : "slide",
                    controlsContainer : ".flex-container"
                });
            });

Answer 1

看起来这就是问题

是选择器

selector : ".slides>li>div>div>img",

应该是

selector : ".slides > ul > li > div > div.backstretch > img",

Answer 2

我在zonemedia.sk

上查了一下

HTML：

  <div class="flexslider">
      <ul class="slides">
           <li><img src="img" alt="" /></li>
           <li><img src="img" alt="" /></li>
           <li><img src="img" alt="" /></li>
           <li><img src="img" alt="" /></li>
       </ul>
   </div><!-- .flexslider -->

JS：

$('.flexslider').flexslider({
        animation: "slide",
        controlNav: false,
        smoothHeight: true,
        useCss: true,
        touch: true,
        before: function(){
            $('body').each(function () {
              var $spy = $(this).scrollspy('refresh');
            });
        },
        start: function(){
            $('body').each(function () {
              var $spy = $(this).scrollspy('refresh');
            });
        },
        added: function(){
            $('[data-spy="scroll"]').each(function () {
              var $spy = $(this).scrollspy('refresh');
            });
        }
      });

Answer 3

我相信selector : ".slides>li>div>div"正是您所寻找的，因为1张图片没有使用滑块。如果您定位包含<div> IE，它应该有效。它不需要是<li>。我还没有看到<img>标签是目标选择器的情况。

https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Answer 4

嘿，路径.slides > li > div

中有两个div

现在你只是写.slides > li > div > div > img

将尝试在第一个div中找到图像，因此我们必须像这样定义div

.slides > ul > li > div > .backstretch > img

Answer 5

您在问题中提供的HTML不包含最相关的信息：幻灯片容器。此外，我们不知道您尝试使用哪个滑块，因为它没有在问题中指定。我建议您在提问时提供所有相关信息，以便人们了解周围发生的事情。

但是，我设法在这个tutorial上找到了一个与你部分提供的一样有效的例子，并总结了每个步骤。

首先，确保每个脚本都包含在页面中：

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

然后，要使滑块工作，您显然需要一个可访问的容器来使用。假设它是.slides_container：

<div class="slides_container">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

最后，需要像这样（在标题中）激活滑块：

$(window).load(function() {
    $('.slides_container').flexslider();
});

作为建议，我建议您确保此基本示例在添加任何复杂性之前完美无缺。当它也可以工作时，尝试使用你能想到的最简单的选择器（即：一个元素#temp，这样它就更有可能按预期工作而没有任何调试机会）。只有在您知道每个功能都正常工作时，才应编写最终案例。

我希望这会有所帮助： - ）

Answer 6

jQuery（document）.ready（function（）{

 $('.flexslider').flexslider({
  "image.jpg",
  "image.jpg",
  "image.jpg"
], {duration: 3000, fade: 750});

Flexslider无法使用jquery选择器

6 个答案: