Question

我同时使用bootstrap 4和jquery 3.5.1。滑块似乎根本不起作用。请帮忙。

    <head>
        <link rel="stylesheet" href="css/style.css">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <link rel="stylesheet" href="css/slick-theme.css">
        <link rel="stylesheet" href="css/slick.css">
    </head>
    
        <section class="slider-area slider">
            <div>
                <img src="assets/index/languages/france.png">
            </div>
            <div>
                <img src="assets/index/languages/germany.png">
            </div>
            <div>
                <img src="assets/index/languages/south-korea.png">
            </div>
        </section>

<script src="slick.js"></script>
    <script>
        $(".slider-area").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
    </script>

slider

Answer 1

您可以尝试这样：

<head>
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="assets/index/languages/france.png" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="assets/index/languages/germany.png" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="assets/index/languages/south-korea.png" alt="Third slide">
            </div>
          </div>
        </div>

</body>

Answer 2

PUSHD

请尝试这个。

并添加上述外部样式。

系统会向您显示3，所以不能滑动任何东西。

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
</head>

  <section class="slider-area slider">
    <div>
        <img src="https://image.flaticon.com/icons/svg/555/555602.svg" width="200" height="200" class="mx-auto text-center">
    </div>
    <div>
        <img src="https://image.flaticon.com/icons/svg/940/940279.svg" width="200" height="200" class="mx-auto text-center">
    </div>
    <div>
        <img src="https://image.flaticon.com/icons/svg/3013/3013996.svg" width="200" height="200" class="mx-auto text-center">
    </div>
  </section>
  
  <script>
        $(".slider-area").slick({
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
        });
  </script>

请显示1，然后滑动到另一个。

slidesToShow: 3,
slidesToScroll: 3

我的滑块不起作用（滑动和jQuery 3.5.1）

2 个答案: