Как сделать прокрутку индикаторов в карусели?
Здравствуйте!
Делаю карусель на Bootstrap. Индикаторы выведены как миниатюры внизу в ряд... Стоит задача, что бы активный индикатор всегда был вторым по счету - т.е. при нажатии на индикатор, они прокручивались так что бы активный индикатор стал вторым (ну и соответственно индикаторы должны быть зациклены) . Есть ли решение? <div id="carousel-custom" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <?php $arg = array( 'post_status' => 'publish', 'post_type' => 'tabslider', 'category-slide' => 'logos', 'posts_per_page' => -1 ); $slides = new WP_Query( $arg ); if ( $slides -> have_posts() ) : $i = 0; while ( $slides -> have_posts() ) : $slides -> the_post(); $task_1 = get_field('task_1'); $task_2 = get_field('task_2'); $task_3 = get_field('task_3'); $zagolovok = get_the_title(); $cont = get_the_content(); //print_r( $image_list ); ?> <div class="item <? if ($i==0) { echo 'active'; } ?>"> <h3> <?php echo $zagolovok; ?> </h3> <div class="col-sm-9 flright"> <ul> <li><?php echo $task_1; ?></li> <li><?php echo $task_2; ?></li> <li><?php echo $task_3; ?></li> </ul> <?php echo $cont; ?> </div> </div> <?php $i = $i + 1; endwhile; wp_reset_postdata(); endif; ?> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-custom" role="button" data-slide="prev"> <i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-custom" role="button" data-slide="next"> <i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span> </a> <!-- Indicators --> <ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block"> <?php $arg = array( 'post_status' => 'publish', 'post_type' => 'tabslider', 'category-slide' => 'logos', 'posts_per_page' => -1 ); $slides = new WP_Query( $arg ); if ( $slides -> have_posts() ) : $i = 0; while ( $slides -> have_posts() ) : $slides -> the_post(); $image_list = get_field('tab_logo'); //print_r( $image_list ); ?> <li data-target="#carousel-custom" data-slide-to="<? echo $i; ?>" class="<? if ($i==1) { echo 'active'; } ?>"> <img src="<?php echo $image_list; ?>" alt="..." class="img-responsive"> </li> <?php $i = $i + 1; endwhile; wp_reset_postdata(); endif; ?> </ol> </div> |
Igorsrt,
Цитата:
|
Т.е. никак? :(
А какой-нибудь другой плагин может есть? А то мне этот "висяк" очень не хочется иметь... |
Igorsrt,
сама постановка вопроса, не позволяет дать вам ответа. ваш вопрос из разряда Пойди туда - не знаю куда, принеси то - не знаю что |
У активного индикатора есть класс? (active обычно)
|
j0hnik,
Судя по тексту - есть. class="<? if ($i==1) { echo 'active'; } ?>" |
Насколько я понял, вот такой макет.
И кликнутый элемент должен становиться активным и вставать на вторую позицию в списке. <style> li { display:inline } .active { color:red } </style> <ol> <li>Первый</li> <li class='active'>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> <li>Шестой</li> </ol> <script> document.querySelector("ol").onclick = function(e){ var lis = document.querySelectorAll('li'); var selected = [].indexOf.call(this.children, (e ? e.target :event.srcElement) ) ; if(selected != 1) { curr = selected ? selected - 1: lis.length - 1; var innerOl = "<li>" + lis[curr].innerText + "</li>\n<li class='active'>" + lis[selected].innerText + "</li>\n"; curr++; for(var i = 2;i <lis.length;i++) { curr++; if(curr >= lis.length) { if(selected==0) curr = 1; else curr =0; } innerOl += "<li>" + lis[curr].innerText + "</li>\n"; } this.innerHTML = innerOl; } }; </script> |
Да, именно так должно быть, спасибо... только что-то у меня пока не получается применить к моему коду
<style> li { display:inline } .active { color:red } </style> <ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block"> <li data-target="#carousel-custom" data-slide-to="0" class=""> <img src="http://ingraf.su/wp-content/uploads/adecco.jpg" alt="Adecco" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="1" class=""> <img src="http://ingraf.su/wp-content/uploads/Rambler.jpg" alt="Rambler" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="2" class="active"> <img src="http://ingraf.su/wp-content/uploads/bel.jpg" alt="Белая птица" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="3" class=""> <img src="http://ingraf.su/wp-content/uploads/Rusbiteh.jpg" alt="Русбитех" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="4" class=""> <img src="http://ingraf.su/wp-content/uploads/Tryohgornaya-manufaktura.jpg" alt="Трёхгорная мануфактура" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="5" class=""> <img src="http://ingraf.su/wp-content/uploads/Moskabelmet.jpg" alt="Москабельмет" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="6" class=""> <img src="http://ingraf.su/wp-content/uploads/Asteros.jpg" alt="Астерос" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="7" class=""> <img src="http://ingraf.su/wp-content/uploads/Subaru.jpg" alt="Subaru" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="8" class=""> <img src="http://ingraf.su/wp-content/uploads/Nestle.jpg" alt="Nestle Waters" class="img-responsive"> </li> </ol> <script> document.querySelector("ol").onclick = function(e){ var lis = document.querySelectorAll('li'); var selected = [].indexOf.call(this.children, (e ? e.target :event.srcElement) ) ; if(selected != 1) { curr = selected ? selected - 1: lis.length - 1; var innerOl = "<li>" + lis[curr].innerText + "</li>\n<li class='active'>" + lis[selected].innerText + "</li>\n"; curr++; for(var i = 2;i <lis.length;i++) { curr++; if(curr >= lis.length) { if(selected==0) curr = 1; else curr =0; } innerOl += "<li>" + lis[curr].innerText + "</li>\n"; } this.innerHTML = innerOl; } }; </script> Ваш код работает, а мой нет... что не так? |
видимо, потому что у Вас текст, а у меня картинки - вот я тупой... Но как переделать, так и не пойму... И еще мне нужно, что бы одновременно отображались не все элементы - т.е. в списке их например 6, а на экране отображалось только 4 ближайших к активному
|
делегирование , индекс элемента, бесконечная карусель
Dilettante_Pro :thanks:
Igorsrt, без дополнительного класса active <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> li { display:inline } li:nth-child(2) img{ border: 2px solid #FF0033; } li:nth-child(4) ~ li{ display: none; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener("DOMContentLoaded", function() { var carousel = document.querySelector(".carousel-indicators"); carousel.addEventListener("click", function(event) { var target = event.target; if (target = target.closest("li")) { var li = carousel.querySelectorAll("li"); var selected = [].indexOf.call(li, target); selected = selected ? --selected : li.length - 1; [].forEach.call(li, function(el, i) { if (i < selected) carousel.appendChild(el) }) } }) }); </script> </head> <body> <ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block"> <li data-target="#carousel-custom" data-slide-to="0" class=""> <img src="http://ingraf.su/wp-content/uploads/adecco.jpg" alt="Adecco" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="1" class=""> <img src="http://ingraf.su/wp-content/uploads/Rambler.jpg" alt="Rambler" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="2" class=""> <img src="http://ingraf.su/wp-content/uploads/bel.jpg" alt="Белая птица" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="3" class=""> <img src="http://ingraf.su/wp-content/uploads/Rusbiteh.jpg" alt="Русбитех" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="4" class=""> <img src="http://ingraf.su/wp-content/uploads/Tryohgornaya-manufaktura.jpg" alt="Трёхгорная мануфактура" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="5" class=""> <img src="http://ingraf.su/wp-content/uploads/Moskabelmet.jpg" alt="Москабельмет" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="6" class=""> <img src="http://ingraf.su/wp-content/uploads/Asteros.jpg" alt="Астерос" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="7" class=""> <img src="http://ingraf.su/wp-content/uploads/Subaru.jpg" alt="Subaru" class="img-responsive"> </li> <li data-target="#carousel-custom" data-slide-to="8" class=""> <img src="http://ingraf.su/wp-content/uploads/Nestle.jpg" alt="Nestle Waters" class="img-responsive"> </li> </ol> </body> </html> |
Часовой пояс GMT +3, время: 23:44. |