带有随机初始图像的全屏bootstrap旋转木马

>本文展示了构建两个简单的自举旋转木马扩展：全屏幻灯片和带有随机初始幻灯片的轮播。 我们将从基本的旋转木马开始，然后增强。

密钥概念：

• >全屏旋转木马：使用自定义jQuery动态调整轮播的高度以匹配窗口高度，并设置背景图像和颜色。 一个“全屏” CSS类处理背景样式。
• >>随机初始幻灯片：>确定幻灯片的总数，生成一个随机数，然后将“活动”类应用于相应的幻灯片和指示器。

构建基本旋转木制：> Bootstrap提供核心的旋转木结构。 每个图像都包含a后备背景颜色的

属性，如果图像加载失败：

> data-color Javascript初始化旋转木马，设置间隔并禁用暂停：

<code class="language-html"><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="0">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="1">
    <li data-target="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" data-slide-to="2">
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="https://img.php.cn/upload/article/000/000/000/173958517524890.jpg" alt="A Full-screen Bootstrap Carousel with Random Initial Image ">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Image</h5>
      </div>
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
    <div class="carousel-item">
      <!-- ... more slides ... -->
    </div>
  </div>
  <a class="carousel-control-prev" href="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" 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="https://www.php.cn/link/de1d5674932fce63c24dc80f6f1ffe9f" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div></code>

创建一个全屏幻灯片：

<code class="language-javascript">$('.carousel').carousel({
  interval: 6000,
  pause: false
});</code>

此增强使用自定义jQuery：

和CSS：

<code class="language-javascript">let $item = $('.carousel-item');
let $wHeight = $(window).height();

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

$('.carousel img').each(function() {
  let $src = $(this).attr('src');
  let $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);
});</code>

此代码通过图像迭代，在其父容器上设置背景图像和颜色，删除

元素（现在使用背景），然后调整窗口大小的高度。 初始幻灯片的

类是通过jQuery进行的，以进行更平滑的过渡。

<code class="language-css">.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}</code>

随机化初始幻灯片：<img alt="带有随机初始图像的全屏bootstrap旋转木马" >> active>要在负载上显示随机幻灯片，请从HTML中删除硬编码

的类，然后添加此jQuery：

> 此代码选择随机幻灯片，并将

类应用于相应的幻灯片和指示器。

active进一步的自定义思想：

<code class="language-javascript">let $numberOfSlides = $('.carousel-item').length;
let $currentSlide = Math.floor(Math.random() * $numberOfSlides);

$('.carousel-indicators li').each(function() {
  let $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');
  }
});</code>

>使用CSS过渡或JavaScript动画库添加动画效果（淡出，比例）。active

实现图像叠加。

使用>事件随机化下一个/上一个幻灯片。

>

• 这种增强的方法提供了更具动态和引人入胜的旋转木马。切记包括必要的bootstrap css和javaScript文件。
>

以上是带有随机初始图像的全屏bootstrap旋转木马的详细内容。更多信息请关注PHP中文网其他相关文章！