Bootstrap 4 карусель, как активировать переходы?

У меня есть карусель Bootstrap 4, и мне нужно каждый раз перемещать 4 слайда. Я использую этот код, и он работает:

$(this).carousel(4);

Проблема в том, что карусель просто переходит к этому индексу и не показывает никаких переходов. Если я использую $(this).carousel("next"); или $(this).carousel("prev");, он работает и переходит правильно.

Я попытался использовать что-то вроде этого:

$(this).carousel("next");
$(this).carousel("next");

Но это не работает. Любая помощь будет оценена.

ОБНОВЛЯТЬ

Я нашел обходной путь:

test = setInterval(() => {
  count++;
  $(".carousel-control-next").click();
  if (count > 3) {
    count = 0;
    clearInterval(test);
  }
}, 200);

Я использовал интервал, потому что следующее не работает:

$(".carousel-control-next").click() внутри цикла или
$(".carousel-control-next").click() внутри setTimeout внутри цикла

Возможно, здесь уже ответили: stackoverflow.com/a/16973054/519413.

— 16.04.2023 17:32

Спасибо за быстрый ответ, клиент использует эту библиотеку T_T, давайте посмотрим эту ссылку сейчас

— 16.04.2023 17:35

Каковы имена классов этих элементов и как они определены в вашем CSS? Я также не вижу добавления свойств анимации в ваш код jQuery.

— 16.04.2023 18:22

я не использую какой-либо пользовательский css, я просто хочу использовать собственный код bootstrap, jquery и css, чтобы разрешить эту ситуацию, я даже помещаю этот код в цикл: $(this).carousel("next"), но это не так работа Т_Т

— 16.04.2023 18:46

@BarlyEspinal Карусель мгновенно перескакивает на целевой слайд без анимации? Или проблема в том, что вы получаете анимацию, но она переходит от текущего слайда к целевому слайду, не показывая промежуточные слайды?

— 17.04.2023 09:29

@tom the carousel просто мгновенно переходите к целевому слайду без анимации T_T.

— 17.04.2023 16:33

@BarlyEspinal Это странно, я не уверен, почему он это делает. Базовая демонстрация в моем ответе показывает переходы. Если вы довольны своим обходным решением, это нормально; если вы хотите выяснить основную причину, опубликуйте минимально воспроизводимый пример.

— 18.04.2023 10:37

javascript jquery css bootstrap-4 carousel

16.04.2023 17:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

прежде всего вам нужно включить в проект необходимый JavaScript и CSS, создать необходимый HTML и использовать встроенный класс карусели.

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

ссылка в "голове" и скрипты в конце "тела". Затем создайте HTML-карусель, используя класс карусели и уникальные идентификаторы. В структуру должны входить индикаторы, элементы и элементы навигации:

<div id = "myCarousel" class = "carousel slide" data-ride = "carousel">


<!-- Indic-->
  <ul class = "carousel-indicators">
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
    <li data-target = "#myCarousel" data-slide-to = "1"></li>
    <li data-target = "#myCarousel" data-slide-to = "2"></li>
  </ul>
  
  <!-- slides -->
  <div class = "carousel-inner">
    <div class = "carousel-item active">
      <img src = "img1.jpg" alt = "Image 1" width = "100%" height = "100%">
      <div class = "carousel-caption">
        <h3>Image 1</h3>
        <p>Description 1</p>
      </div>
    </div>
    <div class = "carousel-item">
      <img src = "img2.jpg" alt = "Image 2" width = "100%" height = "100%">
      <div class = "carousel-caption">
        <h3>Image 2</h3>
        <p>Description 2</p>
      </div>
    </div>
    <div class = "carousel-item">
      <img src = "img3.jpg" alt = "Image 3" width = "100%" height = "100%">
      <div class = "carousel-caption">
        <h3>Image 3</h3>
        <p>Description 3</p>
      </div>
    </div>
  </div>
  
  <!-- Contr-->
  <a class = "carousel-control-prev" href = "#myCarousel" data-slide = "prev">
    <span class = "carousel-control-prev-icon"></span>
  </a>
  <a class = "carousel-control-next" href = "#myCarousel" data-slide = "next">
    <span class = "carousel-control-next-icon"></span>
  </a>
</div>

Поменяйте местами «img1.jpg», «img2.jpg» и «img3.jpg» на пути к изображениям или ссылки (URL-адреса), которые вы хотите использовать. И последнее, активируйте карусель, бутстрап автоматически активирует ее, когда атрибут data-ride = "carousel" добавляется к основному элементу карусели div. Также вы можете проверить больше информации здесь: документация по загрузке карусели.

Надеюсь, это поможет и ответит на ваш вопрос.

Почти забыл:

$(document).ready(function() {
  // Initialize the carousel
  $("#myCarousel").carousel({ interval: false });

  // Custom next function
  $(".carousel-control-next").click(function() {
    moveCarousel(4);
  });

  // Custom prev function
  $(".carousel-control-prev").click(function() {
    moveCarousel(-4);
  });

  // Move the carousel by the specified number of slides
  function moveCarousel(steps) {
    var currentIndex = $("#myCarousel .carousel-inner .carousel-item.active").index();
    var totalItems = $("#myCarousel .carousel-inner .carousel-item").length;

    var targetIndex = currentIndex + steps;
    if (targetIndex < 0) {
      targetIndex = 0;
    } else if (targetIndex >= totalItems) {
      targetIndex = totalItems - 1;
    }

    $("#myCarousel").carousel(targetIndex);
  }
});

Чтобы включить эффект плавного перехода, измените код:

// Move the carousel by the specified number of slides
function moveCarousel(steps) {
  var currentIndex = $("#myCarousel .carousel-inner .carousel-item.active").index();
  var totalItems = $("#myCarousel .carousel-inner .carousel-item").length;
  var remainingSteps = steps;

  function moveOneStep() {
    var newIndex = currentIndex + (remainingSteps > 0 ? 1 : -1);
    if (newIndex < 0 || newIndex >= totalItems) {
      return;
    }

    $("#myCarousel").one("slid.bs.carousel", function() {
      remainingSteps -= (remainingSteps > 0 ? 1 : -1);
      if (remainingSteps !== 0) {
        moveOneStep();
      }
    });

    $("#myCarousel").carousel(newIndex);
    currentIndex = newIndex;
  }

  moveOneStep();
}

16.04.2023 21:03

Я не уверен, почему .carousel(4) не анимируется для вас, это происходит на базовом примере:

<!-- https://getbootstrap.com/docs/4.6/getting-started/introduction/#starter-template -->
<!doctype html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin = "anonymous">
  </head>
  <body>

    <!-- https://getbootstrap.com/docs/4.6/components/carousel/#slides-only -->
    <div id = "carouselExampleSlidesOnly" class = "carousel slide" data-ride = "carousel">
      <div class = "carousel-inner">
        <div class = "carousel-item active"><svg class = "bd-placeholder-img bd-placeholder-img-lg d-block w-100" width = "200" height = "100" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: First slide" preserveAspectRatio = "xMidYMid slice" focusable = "false"><title>Placeholder</title><rect width = "100%" height = "100%" fill = "#777"></rect><text x = "50%" y = "50%" fill = "#555" dy = ".3em">First slide</text></svg></div>
        <div class = "carousel-item"><svg class = "bd-placeholder-img bd-placeholder-img-lg d-block w-100" width = "200" height = "100" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Second slide" preserveAspectRatio = "xMidYMid slice" focusable = "false"><title>Placeholder</title><rect width = "100%" height = "100%" fill = "#666"></rect><text x = "50%" y = "50%" fill = "#444" dy = ".3em">Second slide</text></svg></div>
        <div class = "carousel-item"><svg class = "bd-placeholder-img bd-placeholder-img-lg d-block w-100" width = "200" height = "100" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Third slide" preserveAspectRatio = "xMidYMid slice" focusable = "false"><title>Placeholder</title><rect width = "100%" height = "100%" fill = "#555"></rect><text x = "50%" y = "50%" fill = "#333" dy = ".3em">Third slide</text></svg></div>
        <div class = "carousel-item"><svg class = "bd-placeholder-img bd-placeholder-img-lg d-block w-100" width = "200" height = "100" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Fourth slide" preserveAspectRatio = "xMidYMid slice" focusable = "false"><title>Placeholder</title><rect width = "100%" height = "100%" fill = "#777"></rect><text x = "50%" y = "50%" fill = "#555" dy = ".3em">Fourth slide</text></svg></div>
        <div class = "carousel-item"><svg class = "bd-placeholder-img bd-placeholder-img-lg d-block w-100" width = "200" height = "100" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Fifth slide" preserveAspectRatio = "xMidYMid slice" focusable = "false"><title>Placeholder</title><rect width = "100%" height = "100%" fill = "#666"></rect><text x = "50%" y = "50%" fill = "#444" dy = ".3em">Fifth slide</text></svg></div>
        <div class = "carousel-item"><svg class = "bd-placeholder-img bd-placeholder-img-lg d-block w-100" width = "200" height = "100" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Sixth slide" preserveAspectRatio = "xMidYMid slice" focusable = "false"><title>Placeholder</title><rect width = "100%" height = "100%" fill = "#555"></rect><text x = "50%" y = "50%" fill = "#333" dy = ".3em">Sixth slide</text></svg></div>
      </div>
    </div>

    <button onclick = "$('#carouselExampleSlidesOnly').carousel(4)">Skip to fifth slide</button>

    <!-- jQuery and Bootstrap Bundle (includes Popper) -->
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin = "anonymous"></script>
  </body>
</html>

Два примечания:

.carousel(4) переходит к слайду с индексом 4 (т. е. к пятому слайду) независимо от текущего слайда. Если вы хотите перейти на 4 вперед от текущего слайда, используйте
```
let index = $(this).find(".active").index();
$(this).carousel(index + 4);
```
Анимация переходит непосредственно от текущего слайда к целевому слайду, пропуская любые промежуточные слайды. Если вы хотите, чтобы анимация проходила через все промежуточные слайды, посмотрите ответ @David NoHorizon.

Я заметил, что двойной вызов .carousel("next") у меня тоже не работает (переходит только на один слайд вперед).

16.04.2023 21:59