Вопросы Теги

Bootstrap 4 Carousel с несколькими горками

Мое мнение спорно в течение дня - по умолчанию позволяет NULLs в столбцах базы данных, вероятно, худшее общепризнанной дизайнерское решение во всех RDBMS земли. Каждый производитель делает это, и это неправильно. NULL отлично подходят для определенных, специфичных, продуманных экземпляров, но идея о том, что вы должны явно запретить NULL для каждого столбца, делает небрежную нулеустойчивость более распространенной, чем она должна быть.

0
задан Christian 18 January 2019 в 17:03
поделиться

1 ответ

Чтобы иметь полный контроль над реагирующими на карусель столбцами в структуре Bootstrap и иметь возможность контролировать, сколько столбцов нужно скользить в каждой точке останова, нужно использовать слайдер Ken Wheelers Slick . Это круто! Моя демонстрация только царапает поверхность, вы можете изменить параметры ползунка на каждой точке останова, если хотите. См. Его документацию .

Пожалуйста, обратите внимание, что в моем JavaScript Slick jQuery я определяю mobileFirst: true, который заставляет точки останова Slick работать так же, как точки останова Bootstrap ... сначала mobile [!]

jQuery

Это массив javascript, копирующий точки останова сетки Bootstrap 4, которые я затем передаю в функцию jQuery слайдера Slick. Приведенный ниже код является излишним, чтобы продемонстрировать, как вы можете изменить размер столбца и сколько столбцов нужно скользить на каждой анимации слайда Slick. 

var breakpoint = {
  // Small screen / phone
  sm: 576,
  // Medium screen / tablet
  md: 768,
  // Large screen / desktop
  lg: 992,
  // Extra large screen / wide desktop
  xl: 1200
};

// page slider
$('#slick').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  draggable: true,
  infinite: true,
  dots: false,
  arrows: false,
  speed: 1000,
  mobileFirst: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5
      }
    }
  ]
});

Sass (css)

Если вы не используете sass, дайте мне знать, что я обновлю css. Этот sass / css ниже, имитирует поля строк / столбцов Bootstrap 4 и стили заполнения. 

#slick {

  .slick-list {
    margin: {
      left: -15px;
      right: -15px;
    }
  }

  .slick-slide {
    padding-right: 15px;
    padding-left: 15px;

    &:focus {
      outline: none;
    }
  }
}

Очень просто и гораздо больше контроля, чем дает вам карусель Bootstrap.

См. Этот jsfiddle , где вы можете проверить каждую из точек останова Bootstrap, и на каждой точке останова вы увидите изменение, которое определено в моем сценарии выше. Приведенная выше функция jQuery Slick: когда Slick скользит к следующему слайду, я установил для каждой точки останова slidesToScroll скользящее одинаковое количество slidesToShow ... но вы можете изменить эти настройки так, как вам хочется.

Хорошая особенность этого метода в том, что вы можете зациклить все свои статьи / посты в одном контейнере, вместо того, чтобы прерывать ваш цикл для вывода дополнительного .row div. Просто используйте функцию Слика, чтобы контролировать, сколько столбцов показывать в каждой точке останова.

См. Рабочую демонстрацию https://jsfiddle.net/joshmoto/rh1wymuk/

См. Ниже демонстрацию stackoverflow, но вы не сможете проверить точки останова [1125 ] 

var breakpoint = {
  // Small screen / phone
  sm: 576,
  // Medium screen / tablet
  md: 768,
  // Large screen / desktop
  lg: 992,
  // Extra large screen / wide desktop
  xl: 1200
};

// slick slider
$('#slick').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  draggable: true,
  infinite: true,
  dots: false,
  arrows: false,
  speed: 1000,
  mobileFirst: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5
      }
    }
  ]
});
#slick .slick-list {
  margin-left: -15px;
  margin-right: -15px;
}

#slick .slick-slide {
  padding-right: 15px;
  padding-left: 15px;
}

#slick .slick-slide:focus {
  outline: none;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Slick CSS -->
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Slick jQuery min -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">

    <a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>

    <a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>

  </nav>
</header>

<main class="pt-3 pb-3">
  <div class="container">
    <div id="slick">

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/600x400&amp;text=thumbnail" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/600x400&amp;text=thumbnail" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/600x400&amp;text=thumbnail" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/600x400&amp;text=thumbnail" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/600x400&amp;text=thumbnail" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/600x400&amp;text=thumbnail" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>

0
ответ дан joshmoto 18 January 2019 в 17:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: