Bootstrap 4 Carousel с несколькими горками - PullRequest
Новая
       10

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

0 голосов
/ 18 января 2019

Мне нужно, чтобы моя карусель работала без изображений, а вместо этого вращала строки с несколькими столбцами (столбец 4).

По сути, это работает, но столбцы отображаются вертикально, а не 3 рядом, как предполагает код. Чего мне не хватает? 

 <div id="demo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="row rss_ticker carousel-item m-0">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-4">

Мой код можно посмотреть здесь. https://jsfiddle.net/pwf1dahr/1/

1 Ответ

0 голосов
/ 19 января 2019

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

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

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.Просто используйте функцию Slick для управления количеством столбцов, отображаемых в каждой точке останова.

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

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

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

Похожие темы

...