logo标签列表

Flexslider与jQuery选择器不兼容

jqueryhtmlflexsliderjquery-backstretch
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"
                });
            });
5
您的HTML中似乎没有.flexslider类？ - dsgriffin
3
在您发布的代码中，您忘记了关闭 ul 标签（应该是 </ul> 而不是 <ul>）。正如Zenith所指出的那样，我们无法在您的代码中看到 .flexslider 元素。顺便问一下，您想为一张图片使用 flexslider 吗？我觉得不需要，但谁知道呢！因此，请考虑发布相关代码而不是伪代码片段，这将有助于其他用户专注于您的问题。 - A. Wolff
你能发布你正在使用的全部代码吗？ - Sushanth --
6个回答
2

看起来问题出在这里

选择器有问题

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

应该是
selector : ".slides > ul > li > div > div.backstretch > img",
0
我在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');
            });
        }
      });
0

你在问题中提供的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），以便更有可能按预期工作，而无需进行任何调试。只有在您知道每个功能都可用时，才应编写最终案例。
希望这可以帮助您 :-)
0
jQuery(document).ready(function() {
jQuery(document).ready(function() {
 $('.flexslider').flexslider({
  "image.jpg",
  "image.jpg",
  "image.jpg"
], {duration: 3000, fade: 750});
0
0

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

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

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接