bootstrap全屏轮播_具有随机初始图像的全屏Bootstrap轮播

bootstrap全屏轮播

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load.

在本文中，我将为Bootstrap传送带构建两个简单的扩展。 首先，我将创建一个全屏的Bootstrap Carousel幻灯片演示，然后向您展示如何在页面加载时随机化第一张幻灯片。

But before digging into those extensions, let’s start by creating a carousel based on the default styles.

但是，在深入研究这些扩展之前，让我们从基于默认样式创建轮播开始。

制作轮播 (Building the Carousel)

To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:

要创建轮播，我们将利用Bootstrap提供的轮播组件的基本代码：

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

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Image</h5>
      </div>
    </div>
    <div class="carousel-item">
      <!-- slide content -->
    </div>
    <div class="carousel-item">
      <!-- slide content -->
    </div>

    <!-- more slides -->
  </div>

  <!-- Controls -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

Notice that each of our images contains the custom data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.

请注意，我们的每个图像都包含自定义data-color属性。 稍后，我们将使用其值作为后备，以防相应的图像无法加载。

The next step is to initialize the carousel via JavaScript and modify the predefined values of the interval and pause configuration properties. Take note that we choose to set the value of the pause property to false because we always want the cycling to be active:

下一步是通过JavaScript初始化轮播，并修改interval和pause配置属性的预定义值。 请注意，我们选择将pause属性的值设置为false因为我们始终希望循环处于活动状态：

$('.carousel').carousel({
  interval: 6000,
  pause: "false"
});

Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:

遵循这些简单的步骤(当然，还导入了所需的文件)，我们现在应该能够构建轮播的第一个版本。 到目前为止的样子：

See the Pen Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Basic Bootstrap Carousel 。

创建全屏自举轮播幻灯片 (Creating Full-screen Bootstrap Carousel Slides)

At this point we’ll go one step further, converting the existing carousel into a full-screen Bootstrap Carousel slideshow. To implement this updated version we have to add some custom jQuery:

在这一点上，我们将更进一步，将现有的轮播转换为全屏Bootstrap轮播幻灯片。 要实现此更新版本，我们必须添加一些自定义jQuery：

var $item = $('.carousel-item');
var $wHeight = $(window).height();

$item.height($wHeight);
$item.addClass('full-screen');

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

Next, we add some CSS:

接下来，我们添加一些CSS：

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

In the code above, we do the following:

在上面的代码中，我们执行以下操作：

• Loop through our images and get the values of the src and data-color attributes.

  遍历我们的图像并获取src和data-color属性的值。

• Find their direct parent (.item) and assign the full-screen class along with a few background-related properties to it. Keep in mind that the values of those properties depend on the values of the aforementioned attributes (which are different for each image).

  找到他们的直接上级( .item )，并为其分配full-screen类以及一些与背景相关的属性。 请记住，这些属性的值取决于上述属性的值(每个图像都不同)。

• Set the height of the parent element equal to the viewport height. It’s important to mention that we have to recalculate the height of the browser window, when it changes size (using the resize event).

  将父元素的高度设置为等于视口高度。 重要的是要提到，当浏览器窗口更改大小时，我们必须重新计算它的高度(使用resize事件)。

• Remove the img elements which are not needed since we are relying on the backgrounds.

  删除不需要的img元素，因为我们依赖于背景。

Although it’s not required, let’s make one last change. When the page loads, we’ll add the active class to the first slide using jQuery, rather than having it hard-coded in the HTML:

尽管不是必需的，但让我们做最后一个更改。 页面加载后，我们将使用jQuery将active类添加到第一张幻灯片，而不是将其硬编码为HTML：

So instead of this:

所以代替这个：

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="carousel-item active">

We do this:

我们这样做：

$item.eq(0).addClass('active');

This allows us to prevent a small toggle that is possible to occur between the two different heights (before and after the changes we made) of the first slide.

这使我们能够防止在第一张幻灯片的两个不同高度之间(在我们进行更改之前和之后)可能发生小的切换。

Here’s the new version of our slideshow:

这是幻灯片的新版本：

See the Pen Bootstrap Carousel Full Screen by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Bootstrap Carousel全屏 显示 。

It might help to view the full page version to see the difference from the previous example.

查看完整页面版本以了解与上一个示例的区别可能会有所帮助。

初始化随机幻灯片 (Initializing a Random Slide)

Sometimes we might want to show a random slide when the page loads. To build this new functionality, we should update our code. To begin with, we have to remove the default active class from the first slide as well as the first indicator.

有时，我们可能希望在页面加载时显示随机幻灯片。 要构建此新功能，我们应该更新代码。 首先，我们必须从第一张幻灯片以及第一个指示器中删除默认的active类。

Here’s the original code:

这是原始代码：

<!-- etc... -->

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

<!-- etc... -->

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="carousel-item active">

<!-- etc... -->

Which now becomes:

现在变成：

<!-- etc... -->

<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>

<!-- etc... -->

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="carousel-item">

<!-- etc... -->

If you’re using jQuery to add the active class to the first slide, as I explained earlier, you’d need to remove that code after adding the new random slide code.

如前所述，如果您使用jQuery将active类添加到第一张幻灯片，则需要在添加新的随机幻灯片代码后删除该代码。

We can now add the following code snippet to the existing jQuery:

现在，我们可以将以下代码片段添加到现有的jQuery中：

var $numberofSlides = $('.carousel-item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));

$('.carousel-indicators li').each(function(){
  var $slideValue = $(this).attr('data-slide-to');
  if($currentSlide == $slideValue) {
    $(this).addClass('active');
    $item.eq($slideValue).addClass('active');
  } else {
    $(this).removeClass('active');
    $item.eq($slideValue).removeClass('active');
  }
});

• We start by getting the total number of slides and use this value to find a random slide.
  我们首先获取幻灯片总数，然后使用该值查找随机幻灯片。

• We iterate through the carousel indicators and retrieve the value of the data-slide-to attribute. If the random number matches the value of this attribute, we assign the active class to the corresponding slide and indicator. If that doesn’t happen, we remove it from the target elements.

  我们遍历轮播指标并检索data-slide-to属性的值。 如果随机数与该属性的值匹配，则将active类分配给相应的幻灯片和指标。 如果那没有发生，我们将其从目标元素中删除。

Of course, if you don’t want to combine this behavior with the full-page slideshow, feel free to remove the unnecessary code.

当然，如果您不想将此行为与整页幻灯片放在一起，请随时删除不必要的代码。

You can see this functionality in the following CodePen demo:

您可以在下面的CodePen演示中看到此功能：

See the Pen Full-screen Bootstrap Carousel with Random Initial Image by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上带有 SitePoint( @SitePoint )的带有随机初始图像的笔式全屏引导轮播 。

If you click the RERUN button on the CodePen embed, you’ll see the initial image change on each load.

如果单击嵌入在CodePen上的RERUN按钮，您将看到每次加载时的初始图像发生变化。

可能进一步定制吗？ (Potential Further Customizations?)

Beyond the extensions presented in this article, there are many other ways to change the predefined behavior of the carousel component. If you feel adventurous, here are a few other ideas you can examine:

除了本文介绍的扩展之外，还有许多其他方法可以更改轮播组件的预定义行为。 如果您喜欢冒险，可以考虑以下其他一些想法：

• create additional animation effects (e.g. fade or scale) when switching between slides

  在幻灯片之间切换时创建其他动画效果(例如， fade或scale )

• build an image overlay
  建立图像叠加

• randomize the next and previous slides (use the slide.bs.carousel custom event).

  随机化下一张和上一张幻灯片(使用slide.bs.carousel自定义事件)。

结论 (Conclusion)

In this article, I’ve shown you how to add more flexibility to your Bootstrap projects by customizing the carousel component. Although not everyone finds carousels useful anymore, you might have a client ask for such a feature and maybe these customizations will come in handy.

在本文中，我向您展示了如何通过自定义轮播组件来增加Bootstrap项目的灵活性。 尽管并不是每个人都觉得轮播有用，但您可能会让客户要求这种功能，也许这些自定义会派上用场。

If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our Building Your First Website with Bootstrap 4 course for a quick and fun introduction to the power of Bootstrap.

如果您掌握了Bootstrap的基础知识，但又想知道如何将Bootstrap技能提高到一个新的水平，请查看我们的使用Bootstrap 4建立您的第一个网站课程，以快速，有趣地介绍Bootstrap的功能。

翻译自: https://www.sitepoint.com/full-screen-bootstrap-carousel-random-initial-image/

bootstrap全屏轮播