具有多列幻灯片的Bootstrap 4 Carousel [英] Bootstrap 4 Carousel with multi col slides

问题描述

我需要轮播运行时没有图像，而是旋转具有多列的行(col-4).

它基本上是有效的，但是cols是垂直显示的，而不是代码提示并排显示的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/

解决方案

要完全控制Bootstrap框架中的轮播响应列，并控制每个断点可滑动多少列，请使用文档.

请注意，在我的Slick jQuery javascript中，我正在定义mobileFirst: true，这使Slick的断点像Bootstrap的断点一样工作.

jQuery

这是一个JavaScript数组，用于复制Bootstrap 4的网格断点，然后将其传递给Slick滑块jQuery函数.下面的代码过于矫健，无法演示如何更改每个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> 

I need my carousel to run without images, and instead rotate rows with multiple columns(col-4).

Its essentially working, but the cols are displaying vertically and not 3 side by side as the code suggests. What am I missing?

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

My code can be seen here. https://jsfiddle.net/pwf1dahr/1/

解决方案

To have full control over carousel responsive columns in Bootstrap's framework, and have control over how many columns to slide in each breakpoint, is to use Ken Wheelers Slick slider. Its awesome! My demo is only scratching the surface, you can change slider options on every breakpoint if you want too. See his documentation.

Please note in my Slick jQuery javascript, I am defining mobileFirst: true which makes Slick's breakpoints work just like Bootstrap's breakpoints.. mobile first!

jQuery

This is a javascript array replicating Bootstrap 4's grid breakpoints which I then pass to the Slick slider jQuery function. The code below is overkill, to demo how you can change the column size and how many columns to slide on each Slick slide animation.

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)

If your not using sass, let me know i'll update with css. This sass/css below, emulates Bootstrap 4's row/column margin and padding styles.

#slick {

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

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

    &:focus {
      outline: none;
    }
  }
}

Very simple, and way more control than Bootstrap's carousel gives you.

See this jsfiddle where you can test each of Bootstrap's breakpoints, and on each breakpoint, you will see a change which is defined in my script above. The jQuery Slick function above, when Slick slides to the next slide, i've set on each breakpoint slidesToScroll to slide the same amount of slidesToShow.. but you can change these settings to what ever you want.

The nice thing about this method, is that you can loop all of your articles/posts in one single container, rather than breaking your loop to output an extra .row div. Just simply use Slick's function to control how many columns to show in each breakpoint.

See working demo https://jsfiddle.net/joshmoto/rh1wymuk/

See below stackoverflow demo but you wont be able to test breakpoints

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>

这篇关于具有多列幻灯片的Bootstrap 4 Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！