Использование загрузочной карусели, чтобы показывать только 8 элементов на каждом слайде

Я создаю массив неопределенных числовых объектов (поскольку массив создается динамически и на основе интерфейса администратора и количества введенных ими объектов). Я пытаюсь использовать карусель Bootstrap для отображения только 8 объектов на каждом слайде, и если их больше 8, переместите дополнения к следующему слайду до 16, затем к следующему слайду до 24 и так далее. Я также хочу, чтобы он запускался, если пользователь нажимает вперед или назад (чтобы не просматривать слайды автоматически).

Ниже приведен мой код, который выполняется, включая переменную idx, которая представляет собой последовательный номер объекта в массиве (на основе нуля).

HTML

            <div id="articles" class="articles"></div>

JavaScript:

    $(document).ready(function(){
        <% JSONObject jsonObject=(JSONObject)session.getAttribute("responseDetailsJson"); %>
        var tileSetObjects = <%=jsonObject%>
            $.each(tileSetObjects.HelpJSONArray, function(idx, obj){
                $('#articles').append('<article class="pdf-guide" id="article-'+idx+'"><a href="'+obj.LINKVALUE+'" class="link-wrapper"><div class="title-link">'+obj.TITLE+'</div><p class="description">'+obj.LONGCONTENT+'</p></a></article>');
            });
        });

Спасибо за помощь!

Источник

4 ответа

Вы говорите, что используете Bootstrap, но ваша разметка совсем не отражает этого.

Я бы начал с документации по Bootstrap JavaScript, которая включает подробный раздел о карусели.

Как это описано, установите interval опция "ложь", чтобы отключить автопрокрутку, которая достигнет желаемого поведения. Как описано в документации:

Время задержки между автоматическими циклами элемента. Если ложь, карусель не будет автоматически зацикливаться.

Что касается 8 за раз, ваш JavaScript выглядит так, как будто он должен работать, хотя часть инъекции разметки нужно будет изменить, чтобы она соответствовала разметке карусели Bootstrap (см. Ссылку выше).

Источник

Я не уверен, возможно ли это с каруселью Bootstrap. Но есть ползунки, которые могут удовлетворить ваши требования. Слайдер "Slick" - это плагин, который соответствует вашим требованиям, и он также отзывчив.

Вы можете найти демо здесь: http://kenwheeler.github.io/slick/ и выполнить поиск "Несколько элементов".

Источник

Я рекомендую использовать Flickity библиотеку слайдеров JavaScript, созданную Дэвидом ДеСандро из Metafizzy. Для того, чтобы вы могли создавать или создавать адаптивные, удобные для касания карусели, которые можно легко настроить самостоятельно. Он содержит различные функции, такие как wraparround, freescroll, groupcells, автоигра, lazyload, параллакс и многие другие.

Для того, чтобы вы сгруппировали ячейку по тому, что вы хотите, например, вам нужно 8 в каждом слайде, который нужно установить data-flickity='{ "groupCells": 8 } на какой номер вы желаете. Затем поделите 100% на основе от числа, которое вы хотели, например, 100% разделите на 8, а затем установите ширину карусели .carousel-cell { width: 12.5%;} Я надеюсь, что помогу вам и добавлю дополнительную библиотеку или плагины для вашей веб-разработки. Хорошего дня.:)

  <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</head>
<body>
    <h1>Flickity - groupCells</h1>

    <!-- Flickity HTML init -->
    <div class="carousel" data-flickity='{ "groupCells": 8, "autoPlay": true }' style="">
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <div class="carousel-cell"></div>
      <!--Add More Here.....-->
    </div>

</body>
</html>
<style type="text/css">
    /* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 12.5%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel-cell.is-selected {
  background: #ED2;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

</style>
Источник

Количество объектов зависит от ширины, которую вы назначаете для карусели BootStrap, и зависит от ширины каждого слайда.

enter code here http://jsfiddle.net/asimshahiddIT/f1a1zbh4/1/

Источник
Другие вопросы по тегам