Если следующий элемент щелкнул() - Jquery

-1

У меня есть этот код, который HTML для моих слайдеров:Если следующий элемент щелкнул() - Jquery

<div class="et-pb-controllers"> 

<a href="#" class="">1</a> 
<a href="#" class="">2</a> 
<a href="#" class="">3</a> 
<a href="#" class="">4</a> 
<a href="#" class="">5</a> 
<a href="#" class="et-pb-active-control">6</a> 
<a href="#">7</a><a href="#">8</a> 
<a href="#">9</a><a href="#">10</a> 

</div>

С класса е-пб-активной контроля, отмечает слайд, который в настоящее время установлен , Поэтому я хочу, чтобы на карусельных контроллерах было 5 видимых.

Каждый элемент имеет высоту 95px с полями (регуляторы ползунка вертикальны). Поэтому я хочу добавить каждый щелчок на следующем верхнем значении -95 px для каждого элемента управления, который заставит мои элементы управления сглаживать (с помощью анимации CSS), оставляя видимыми только 5 элементов управления (от 2 до 6 элементов управления вместо 1-5). Я не могу найти способ, чтобы jquery взял элемент класса et-pb-active-control и, если щелкнуть следующие элементы или два элемента дальше.

Надеюсь, что я достаточно ясен. Заранее спасибо.

источник

2017-01-12 Usce

_ "Надеюсь, я достаточно ясно." _ Не совсем понятно, что требование, с точки зрения здесь. Вы пытаетесь установить 'css'' top' элемента, следующего за '.et-pb-active-control', когда нажата кнопка« .et-pb-active-control »? Можете ли вы включить 'css' и' javascript', что вы пытались решить проблему в вопросе? – guest271314

есть много уроков о каруселях, но я дам вам совет: вы должны обернуть элементы 'a' внутри другого div. таким образом вам просто нужно переместить этот div с помощью CSS и оживить его, а не делать это со всеми элементами – Kaddath

$(document).ready(function(){ 

    $(document).on("click",".et-pb-active-control", function(){ 

    $(this).next().css("background-color", "red"); 

    }); 

});

Example

источник

2017-01-12 19:14:01

Попробуйте

var position = 0; \t 
 
\t \t $('.next').click(function(){ 
 
\t \t \t position = parseInt(position) -95; 
 
\t \t \t $('.et-pb-controllers').css("top",position); 
 
\t \t \t console.log('here'); 
 
\t \t }) 
 
\t \t $('.prev').click(function(){ 
 
\t \t \t position = parseInt(position) +95; 
 
\t \t \t $('.et-pb-controllers').css("top",position); 
 
     })

.wrap{ 
 
\t \t \t \t height: 475px; 
 
\t \t \t \t width: 600px; 
 
\t \t \t } 
 
\t \t \t .wrap-controllers{ 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t width: 10%; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t overflow: hidden; 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t .wrap-controllers a{ 
 
\t \t \t \t height: 95px; 
 
\t \t \t \t display: block; 
 
\t \t \t } 
 
\t \t \t .slider{ 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t width: 89%; 
 
\t \t \t \t background: gray; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t } 
 
\t \t \t .et-pb-controllers{ 
 
\t \t \t \t top: 0; 
 
\t \t \t \t position: absolute; 
 
\t \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
\t \t <div class="slider"> 
 
\t \t </div> 
 
\t \t <div class="wrap-controllers"> 
 
\t \t \t <div class="et-pb-controllers"> 
 

 
\t \t \t  <a href="#" class="">1</a> 
 
\t \t \t  <a href="#" class="">2</a> 
 
\t \t \t  <a href="#" class="">3</a> 
 
\t \t \t  <a href="#" class="">4</a> 
 
\t \t \t  <a href="#" class="">5</a> 
 
\t \t \t  <a href="#" class="et-pb-active-control">6</a> 
 
\t \t \t  <a href="#">7</a> 
 
\t \t \t  <a href="#">8</a> 
 
\t \t \t  <a href="#">9</a> 
 
\t \t \t  <a href="#">10</a> 
 

 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
<button class="prev">Prev</button> 
 
<button class="next">Next</button>

источник

2017-01-12 21:17:50 zelti

Если следующий элемент щелкнул() - Jquery

ответ

Смежные вопросы