Карусель Siema не будет работать. Я добавил файл в свои wp-include - PullRequest
Новая
       44

Карусель Siema не будет работать. Я добавил файл в свои wp-include

0 голосов
/ 04 мая 2019

Я пытаюсь заставить эту работать на моей странице WP, но она не будет работать.Я скачал стабильный выпуск отсюда и добавил siema.min.js файл в wp-includes/js/slider/siema.min.js, и я сначала попытался вызвать файл на странице, добавив вкладку сценария src и путь.Но это не сработало, и я добавил его через плагин «Вставить верхний колонтитул».Но это все еще не работает, а показывает изображение под другим.

HTML 

const mySiema = new Siema();
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

prev.addEventListener('click', () => mySiema.prev());
next.addEventListener('click', () => mySiema.next());
body {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

img {
  width: 100%;
}

.siema {
  margin: 1rem 0;
}
<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

Веб-страница в вопросе.

1 Ответ

1 голос
/ 04 мая 2019

Вам нужно как минимум предоставить селектор для инициализации Siema

const mySiema = new Siema({
  selector: '.siema',
});

Здесь вы найдете другие доступные опции.

Примечание: при посещении веб-сайта в консоли браузера возникает ошибка, сообщающая об этом.Кроме того, не забудьте поместить свои скрипты в $(document).ready(function(){});

Фрагмент: 

$(document).ready(function() {
  const mySiema = new Siema({
    selector: '.siema'
  });
  const prev = document.querySelector('.prev');
  const next = document.querySelector('.next');

  prev.addEventListener('click', () => mySiema.prev());
  next.addEventListener('click', () => mySiema.next());
});
body {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

img {
  width: 100%;
}

.siema {
  margin: 1rem 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://my.nikah.io/wp-includes/js/slider/siema.min.js"></script>



<div class="siema">
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
  <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>

<button class="prev">Prev</button>
<button class="next">Next</button>

Обновление из комментариев

На вашей странице есть несколько ошибок и много предупреждений о неуникальный идентификатор

На данный момент трудно найти более поздние ошибки, но первая приводит к тому, что ваша карусель siema не работает.

Ваша ошибка говорит:

Uncaught SyntaxError: Unexpected token <

Ваш код: 

<script>
  $(document).ready(function () {
    const mySiema = new Siema({
      selector: '.siema'
    });
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    </p> // remove this tag
    < p > // remove this tag
    prev.addEventListener('click', () => mySiema.prev());
    next.addEventListener('click', () => mySiema.next());
  });
</script>

Эта ошибка означает, что в вашем скрипте есть html-теги, а < нетожидается на этой позиции.Удалите эти <p> теги из сценария инициализации siema.и это должно работать.

...