Следующая Предыдущая Кнопка и раскрывающийся список работают вместе в слайдере контента

0

Пожалуйста, взгляните на ползунок (скрипка). Возможно ли, чтобы следующие/предыдущие кнопки работали с полем выбора, которое позволяет мне перейти к определенному слайду, сопоставляя классы слайда и значение параметра? Может быть, сначала определите класс заголовка слайда, прежде чем переходить к другим условиям if $('#left, #right').click(function(){?

HTML:

<div id="event_rotator">
 <div id="searchslider">

     <div class="eventslide title1 softblue">
     <h3 class="whitetitle">Title1</h3>
     <div class="slidebackground">
     <p>gfhhhhhhhh</p>
     </div>
     </div>
     <div class="eventslide title2 softblue">
     <h3 class="whitetitle">Title2</h3>
     <div class="slidebackground">
     <p>Text3</p>
     </div></div>
   ..........................
  </div>      
</div>

<button id="left">left</button>
<button id="right">right</button>

<select class="select_title">
 <option value="title1">Select</option>
 <option value="title1">Title_1</option>
 <option value="title2">Title_2</option>
 <option value="title3">Title_3</option>
 <option value="title4">Title_4</option>
</select>

JS Script:

$('.select_title').change(function(){
    var selected = $(this).find(':selected');
    $('.eventslide').hide();
   $('.'+selected.val()).show(); 
});
var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }

  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

1 ответ

1
Лучший ответ

Это должна быть ваша функция изменения

$('.select_title').change(function(){
  var selIndex = $(this).prop("selectedIndex");
  if (selIndex == 0) return false;
  C = selIndex - 1;
  $('#searchslider').stop().animate({left: -C*W }, 500 ); 
});

ОБНОВЛЕНО FIDDLE

Ещё вопросы

Сообщество Overcoder
Наверх
Меню