Как по очереди переключать элементы?

Question

[Space]

Есть такой блок, в нём "детки". Нужно чтобы каждую 1 секунду один блок исчезал, а следующий появлялся. Изначально активен первый элемент. Пытался через each, но мне сразу все дочерние отключает:

<div class="landing__features__carousel">
	<div class="landing__features__carousel-1"></div>
	<div class="landing__features__carousel-2" style="display: none"></div>
	<div class="landing__features__carousel-3" style="display: none"></div>
</div>

setInterval(function(){
    			$('.landing__features__carousel > div').each(function(index) {
    				// Пытался тут setTimeout ставить - всё равно все отключает сразу и всё
    				$(this).css('display', 'none');
    				$(this).next().css('display', 'block');
    			});
      	}, 500); // это для цикличности

Кто подскажет в чём ошибка?

Comments

[alex]

ошибка в том что вы берет всех деток, проходитесь по ним циклом и каждой ставите display: none и повторяете эту операцию каждые полсекунды.

Answer 1

[alex]

html

<div class="wrap">
  <div class="block visible">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
</div>

css

.block {
  display: none;
}

.block.visible {
  display: block;
}

js

function toggler(selector, delay) {
  let elems = $(selector),
      length = elems.length-1,
      i = 0;
  
  function toggleTo(index) {
    elems.removeClass('visible');
    $(elems[index]).addClass('visible');
  }
  
  setInterval(function(){
    toggleTo(i === length ? i = 0 : ++i)
  }, delay);
}

toggler('.block', 1000);

Comments

[Space]

Спасибо большое. Подскажите, где изучить js на тот уровень, что вы мне написали код? Или как вы обучались?

[alex]

Cosmos:

где изучить js

нигде. не тратьте время на поиски идеальной кижки/сайта, прочитав которые вы станите js-ниндзя, таких нету.

spoiler

из теории мне нравятся — https://learn.javascript.ru/, Выразительный Javascript, JavaScript: The Definitive Guide, 6th Edition(можно как справочник) — затем практика и как можно больше, неплохой ресурс. также смотрите на ютубе записи конференций, митапов и т.д., читайте статьи, блоги, stackoverflow, впитывайте информацию отовсюду откуда можно и параллельно - практика. это самое главное. и понимание придет со временем и опытом.

Answer 2

[Negwereth]

CSS Анимация + задержка на каждом элементе.

Comments

[Space]

Можно пример?

[Negwereth]

Нет. Вам надо найти как работать с понятием CSS Animation и с понятием animation-delay. Разберитесь сами, это гуглится влёт.