Question

我在一个网站上工作，似乎存在冲突的元素。

我从a template开始，其中包含许多来自不同地方的“借来” CSS和JS元素，现在我尝试添加 Slick slideshow ，是JS或CSS中的冲突导致我无法编辑Slick滑块（“ Organic Farm”模板中已经存在了slick-slider代码的一部分）。

现在我将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的Inspector，但在这里我真的很困惑。

Answer 1

要考虑的两件事：

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，{{1 }}和swiper-wrapper。要实现该幻灯片显示，您必须在页面上包含该库，然后使用以下内容初始化幻灯片显示：

swiper-slide

解决网站上冲突的元素

1 个答案: