Flexslider не работает с селектором jquery

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

Я считаю, что selector : ".slides>li>div>div" является то, что вы ищете, так как нет использования ползунка для 1 изображения. Он должен работать, если вы нацеливаетесь на содержащий <div> IE. он не должен быть <li>. Я не видел случая, когда тег <img> был целевым селектором.

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

Answer 3

эй есть два DIV-й в пути .slides > li > div

теперь вы просто писать .slides > li > div > div > img

, который будет пытаться найти изображение в первом DIV таким образом, мы должны определить DIV, как это

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

Answer 4

проверить ред его на 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 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 (документ) .ready (функция() {

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