Устранение проблем с конфликтующими элементами на веб-сайте - PullRequest
Новая
       150

Устранение проблем с конфликтующими элементами на веб-сайте

0 голосов
/ 30 мая 2020

Я работаю над веб-сайтом, и мне кажется, что есть конфликтующие элементы.

Я начал с шаблона , который содержит множество «заимствованных» CSS и JS элементов из разных мест, а теперь я пытаюсь добавить Плавное слайд-шоу , и есть конфликты либо в JS, либо в CSS, которые не позволяют мне редактировать слайдер Slick (части кода слайдера Slick уже присутствовали в "Organi c Farm ").

Прямо сейчас у меня загружаются на страницу js/core.min.js, js/script.js и js/slick.js, а затем внизу страницы индекса: 

<script type="text/javascript">
    $(document).ready(function(){
      $('.swiper-slide').slick({
          dots: true,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          centerMode: true,
          variableWidth: true,
      });
    });
</script>

Часть HTML: 

  <section class="section">
    <div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
      <div class="swiper-wrapper swiper-wrapper-custom">
        <div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
          <div class="swiper-slide-caption">
            <div class="container text-center">
              <div class="row justify-content-center">
                <div class="col-md-9 col-lg-8 top">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
          <div class="swiper-slide-caption">
            <div class="container text-center">
              <div class="row justify-content-center">
                <div class="col-md-9 col-lg-8 top">
                </div>
              </div>
            </div>
          </div>
        </div>

Есть ли способ узнать, почему мой собственный сценарий не активен? Стрелки тоже не появляются. Для чего угодно HTML и CSS я использую инспектор Firefox, но здесь я действительно в тупике.

1 Ответ

2 голосов
/ 01 июня 2020

Две вещи, которые следует учитывать:

1) При использовании slick. js его обычно добавляют к элементу, который является родительским для набора элементов, которые затем преобразуются в слайды. Например: 

<div id="slide-wrapper">
    <div class="my-slide">...</div>
    <div class="my-slide">...</div>
    <div class="my-slide">...</div>
</div>

$('.slide-wrapper').slick({
    ...
});

В вашем случае это будет означать добавление Slick к swiper-wrapper: 

$('.swiper-wrapper').slick({
    ...
});

2) Скорее всего, проблема в том, что у вас конфликт с настройкой из другой библиотеки слайд-шоу, Swiper. js (https://swiperjs.com/api/), в которой используются такие классы, как swiper-container, swiper-wrapper и swiper-slide. Чтобы реализовать это слайд-шоу, вам нужно будет включить эту библиотеку на свою страницу и инициализировать слайд-шоу примерно так: 

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});
...