4

我正在使用 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"
                });
            });
4

6 回答 6

2

看起来这是个问题

与选择器

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

应该是

selector : ".slides > ul > li > div > div.backstretch > img",
于 2013-05-22T20:02:37.653 回答
0

I checked it on 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');
            });
        }
      });
于 2013-05-31T16:05:08.300 回答
0

我相信selector : ".slides>li>div>div"这就是您要寻找的东西，因为 1 幅图像没有使用滑块。如果您针对包含的<div>IE，它应该可以工作。它不需要是<li>. 我还没有看到<img>标签是目标选择器的情况。

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

于 2013-05-27T05:52:16.853 回答
0

嘿，路径中有两个 div.slides > li > div

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

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

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

于 2013-05-29T21:42:11.997 回答
0

jQuery(文档).ready(函数() {

 $('.flexslider').flexslider({
  "image.jpg",
  "image.jpg",
  "image.jpg"
], {duration: 3000, fade: 750});
于 2014-03-10T20:00:50.230 回答
0

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

但是，我设法在本教程中找到了一个工作示例，它与您部分提供的示例类似，并将总结每个步骤。

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

<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，因此它更有可能按预期工作而没有任何调试机会）。仅当您确实知道每个功能都正常工作时，才应编写最后一个案例。

我希望这有帮助 ：-）

于 2013-06-01T06:35:32.430 回答