0

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

我从一个模板开始，其中包含许多来自不同地方的“借用”CSS 和 JS 元素，现在我正在尝试添加一个Slick 幻灯片，并且 JS 或 CSS 中存在冲突，阻止我编辑 Slick滑块（部分 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，但在这里我真的很难过。

4

1 回答 1

2

需要考虑两件事：

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
});
于 2020-06-01T02:55:12.357 回答