03.10.2017, 11:20
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Как сделать прокрутку индикаторов в карусели?
Здравствуйте!
Делаю карусель на 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>
|
|
03.10.2017, 11:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Igorsrt,
|
Цитата:
|
|
из милицейского жаргона. "Висяк" - это дело, не раскрывающееся в установленные сроки
|
|
|
03.10.2017, 12:12
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
Т.е. никак? 
А какой-нибудь другой плагин может есть? А то мне этот "висяк" очень не хочется иметь... |
|
03.10.2017, 12:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Igorsrt,
сама постановка вопроса, не позволяет дать вам ответа. ваш вопрос из разряда Пойди туда - не знаю куда, принеси то - не знаю что
|
|
03.10.2017, 13:26
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
У активного индикатора есть класс? (active обычно)
|
|
03.10.2017, 14:41
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
j0hnik,
Судя по тексту - есть.
class="<? if ($i==1) { echo 'active'; } ?>"
|
|
03.10.2017, 14:50
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Насколько я понял, вот такой макет.
И кликнутый элемент должен становиться активным и вставать на вторую позицию в списке.
<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>
Последний раз редактировалось Dilettante_Pro, 03.10.2017 в 17:22.
|
|
04.10.2017, 09:14
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
Да, именно так должно быть, спасибо... только что-то у меня пока не получается применить к моему коду
<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>
Ваш код работает, а мой нет... что не так?
|
|
04.10.2017, 09:33
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
видимо, потому что у Вас текст, а у меня картинки - вот я тупой... Но как переделать, так и не пойму... И еще мне нужно, что бы одновременно отображались не все элементы - т.е. в списке их например 6, а на экране отображалось только 4 ближайших к активному
|
|
04.10.2017, 10:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
делегирование , индекс элемента, бесконечная карусель
Dilettante_Pro 
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>
|
|
|
|
