Ванильный JS - слайдер - активные точки

ProgramBox

Ванильный JS — слайдер — активные точки

Post author:admin
Запись опубликована:21 августа, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

Пожалуйста, не могли бы вы помочь мне назначить класс .active точкам слайдера, которые генерируются JS, они не являются частью HTML. Когда слайд 1 активен, мне нужна точка 1, чтобы иметь class .active, но не повезло.. все решения, которые я нашел, предназначены для точек, жестко закодированных в HTML.

Мой HTML:

   <div class="w3-content w3-display-container">
    <div class="w3-display-container mySlides">
        <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 1</h3>
            <p>1. Lorem Ipsum.</p>
        </div>
    </div>
    <div class="w3-display-container mySlides">
        <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 2</h3>
            <p>2.Lorem Ipsum.</p>
        </div>
    </div>
    <div class="w3-display-container mySlides">
        <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
            <h3>Slide 3</h3>
            <p>3. Lorem Ipsum.</p>
        </div>
    </div>
    <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">amp;#10094;</button>
    <div id="js-slider-dots"></div>
    <button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">amp;#10095;</button>
  </div>

Мой JS (который переключает слайды и генерирует точки):

 var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex  = n);
}

function goToDiv(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i  ) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

function generateDots() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i  ) {
        var dotNumber = i   1;
        var dot = document.createElement('span');
        dot.innerHTML =
            '<button class="js-dot" onclick="goToDiv('   dotNumber   ')">'   dotNumber   '</button>';

        document.getElementById('js-slider-dots').appendChild(dot);

    }
}
generateDots();

Все это также доступно в JS Bin: https://jsbin.com/ketohatane/edit?html ,js, вывод

Ответ №1:

Вы можете легко сделать это с помощью .classList.add() и .remove() .

Просто выберите точки и активируйте точку, которая принадлежит активному слайду в showDivs :

 function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    //get the list of dots
    var y = document.getElementById("js-slider-dots").children;
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i  ) {
        x[i].style.display = "none";
        //remove .active from all dots
        y[i].classList.remove("active")
    }
    x[slideIndex - 1].style.display = "block";
    //add .active to the selected dot
    y[slideIndex - 1].classList.add("active")
}

Смотрите этот фрагмент:

Показать фрагмент кода

 var slideIndex = 1;

function plusDivs(n) {
	showDivs(slideIndex  = n);
}

function goToDiv(n) {
	showDivs(slideIndex = n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//get the list of dots
var y = document.getElementById("js-slider-dots").children;
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i  ) {
    x[i].style.display = "none";
    //remove .active from all dots
    y[i].classList.remove("active")
}
x[slideIndex - 1].style.display = "block";
//add .active to the selected dot
y[slideIndex - 1].classList.add("active")
}

function generateDots() {
	var i;
	var x = document.getElementsByClassName("mySlides");
	for (i = 0; i < x.length; i  ) {
		var dotNumber = i   1;
		var dot = document.createElement('span');
		dot.innerHTML =
			'<button class="js-dot" onclick="goToDiv('   dotNumber   ')">'   dotNumber   '</button>';

		document.getElementById('js-slider-dots').appendChild(dot);

	}
}
generateDots();
//placed AFTER generateDots()
showDivs(slideIndex);

 /* Just for illustration */
.active{outline:solid 1px red;}

   <div class="w3-content w3-display-container">
	<div class="w3-display-container mySlides">
		<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
			<h3>Slide 1</h3>
			<p>1. Lorem Ipsum.</p>
		</div>
	</div>
	<div class="w3-display-container mySlides">
		<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
			<h3>Slide 2</h3>
			<p>2.Lorem Ipsum.</p>
		</div>
	</div>
	<div class="w3-display-container mySlides">
		<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
			<h3>Slide 3</h3>
			<p>3. Lorem Ipsum.</p>
		</div>
	</div>
	<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">amp;#10094;</button>
	<div id="js-slider-dots"></div>
	<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">amp;#10095;</button>
  </div>

Развернуть фрагмент

1. Привет, FZs, спасибо за совет. Мне не повезло заставить его работать. Консоль продолжает показывать мне ошибку «Не удается прочитать свойство ‘classList’ неопределенного значения в showDivs»

2. @VlastaPo Да. Это было потому, что вы звонили showDivs раньше generateDots . Я исправил свой ответ, взгляните на него!

Ответ №2:

Если вы получаете доступ к DOM из своей goToDiv функции, вы можете быть уверены, что получаете доступ к DOM после того, как он был обновлен вашими class="js-dot" элементами.

Что-то подобное даст вам желаемую функциональность.

 function goToDiv(n) {
    showDivs(slideIndex = n);
    var dots = document.getElementsByClassName('js-dot');
    for(var i = 0; i < dots.length; i  ) {
      if (i == n - 1) {
        dots[i].classList.add('active');
      } else {
        dots[i].classList.remove('active');
      }
    }
}

Вот он в действии:
https://jsbin.com/tekukebeye/1/edit?html ,js, вывод

1. Привет, Роуэн, спасибо, к сожалению, это работает только тогда, когда я нажимаю на точки, но не тогда, когда я использую стрелки. Итак, я переместил код в функцию showDivs(), и теперь он также переключает классы для стрелок, но в начале / конце есть проблема, она пропустит последнее / первое число и не добавит класс. Я обновил JS Bin — jsbin.com/ketohatane/edit?html , css, js, консоль, вывод любой идеи, пожалуйста?

Метки: Ванильный JS — слайдер — активные точки