мой слайдер не работает (гладко и jquery 3.5.1) - PullRequest
Новая
       7

мой слайдер не работает (гладко и jquery 3.5.1)

0 голосов
/ 03 августа 2020

Я использую 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>

слайдер

Ответы [ 2 ]

0 голосов
/ 03 августа 2020 

<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>

Пожалуйста, попробуйте это ..

И добавьте выше внешние стили.

Вам дано это шоу 3 поэтому ничего нельзя сдвинуть. 

slidesToShow: 3,
slidesToScroll: 3

Пожалуйста, покажите 1, а затем перейдите к другому. 

slidesToShow: 1,
slidesToScroll: 1
0 голосов
/ 03 августа 2020

можно попробовать так: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...