Как перевести jquery на javascript?

Question

       var swiper = new Swiper('.swiper', {
            paginationClickable: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            watchSlidesVisibility: true,
            parallax: false,
            loop: true,
            height: 'auto',
            paginationClickable: true,
            effect: 'slide',
            disableDraggable: true,
        
            on: {
                init: function (swiper) {
                    getSwiperActiveSlideNumber(swiper);
                },
                slideChange: function (swiper) {
                    getSwiperActiveSlideNumber(swiper);
                }
            },
        })
     $('.thumbs-slide').on('click', function (e) {
         e.preventDefault();
        swiper.slideTo($(this).index()); })
    
     function getSwiperActiveSlideNumber(swiper) {
    
    }

Спасибо за столь обширный ответ. Я извиняюсь, но я забыл пояснить, что класс (.thumbs-slide) выступает в роли буллетов для слайдера.

Вот пример на jquery:

https://codepen.io/CreativeSeo33/pen/ERmZaB

Получается нужно перевести эту строчку swiper.slideTo($(this).index());

Answer 1

Если нужно перевести эту часть кода на чистый JS

$('.thumbs-slide').on('click', function (e) {
         e.preventDefault();
        swiper.slideTo($(this).index()); })

То мы должны сперва понять что тут происходит:

находятся все ноды с классом thumbs-slide
навешивается обработчик события клик с функцией которая предотвращает поведение элемента по умолчанию
вызывается метод swiper который делает текущим слайд на который кликнули через его позицию среди других слайдов

Навешивание события addEventListener вероятно безболезненно можно заменить описыванием события onclick:

// находим все ноды thumbs-slide и для каждой ноды
document.querySelectorAll('.thumbs-slide').forEach(node => {
  // определяем событие клика 
  node.onclick = function(event){
    event.preventDefault() // предотвращаем действие по-умолчанию
    const element = event.target // элемент на котором был клик
    // находим его порядковый номер
    const index = Array.from(element.parentNode.children)
      .findIndex(e => e === element)
    swiper.slideTo(index) 
  } 
})

Или с addEventListener :

function clickOnSlide(event){
  const element = event.target
  const index = Array.from(element.parentNode.children).findIndex(e => e === element)
  swiper.slideTo(index)
} 

document.querySelectorAll('.thumbs-slide').forEach(node => {
  node.addEventListener('click', clickOnSlide, false)
})

При необходимости нужно не забыть отписаться от обработчиков события:

document.querySelectorAll('.thumbs-slide').forEach(node => {
  node.removeEventListener('click', clickOnSlide)
})

Демо:

document.querySelectorAll('.thumbs-slide').forEach(node => {
  // определяем событие клика 
  node.onclick = function(event){
    event.preventDefault() // предотвращаем действие по-умолчанию
    const element = event.target // элемент на котором был клик
    // находим его порядковый номер
    const index = Array.from(element.parentNode.children)
      .findIndex(e => e === element)
    console.clear()
    console.log(`swiper.slideTo(${index})`) 
  } 
})

.thumbs-slide {
  display: inline-block;
  height: 100px;
  width: 120px;
  margin: 5px;
  background: cyan;
}

<p>Клик на слайд выведет в консоль команду slideTo</p>

<div class="thumbs-slide">слайд 1</div>
<div class="thumbs-slide">слайд 2</div>
<div class="thumbs-slide">слайд 3</div>

БЛОГ НА HUSL

Как перевести jquery на javascript?

Ответы (1 шт):