自定义Bootstrap 4全屏轮播错误：控件和标题之间的错误对应关系

时间：2018-06-10 20:48:53

标签： javascript jquery html css twitter-bootstrap

我正在使用全屏Bootstrap 4轮播。幻灯片不包含图片，但视频和字幕。

我将上一张和下一张幻灯片的标题设为控件，而不是＆＃34; classic＆＃34;箭头

为此，我已经整理了一些自定义CSS和jQuery。

我的脚本无法正常工作：右侧控件的内容不是下一张幻灯片的标题; 左侧控件的内容不是上一张幻灯片的标题。

＆＃13;
＆＃13; 
var fullSliderNavigation = function() {
  var slider = $('#full_slider'),
    slide = slider.find('.carousel-item'),
    ctrlNext = slider.find('[data-slide="next"] > span'),
    ctrlPrev = slider.find('[data-slide="prev"] > span');
  slide.each(function(index) {
    if ($(this).hasClass("active")) {
      var ctrlNextVal = $(this).next().find('.capt').text(),
        ctrlPrevVal = $(this).prev().find('.capt').text();
      ctrlNext.text(ctrlNextVal);
      ctrlPrev.text(ctrlPrevVal);
    }
  });
}

$(document).ready(function() {

  if ($('#full_slider').length > 0) {
    fullSliderNavigation();
    $('.carousel-control').on('click', fullSliderNavigation);
  }
  
});
＆＃13; 
/* Slider homepage */

#full_slider .carousel-item {
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#full_slider .carousel-item.active {
  display: flex !important;
  position: relative;
}

#full_slider .carousel-item-left,
#full_slider .carousel-item-right {
  display: flex !important;
}

#full_slider video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
  z-index: -1;
}

#full_slider .video-caption {
  max-width: 595px;
  color: #fff;
}

#full_slider h3 {
  font-weight: 900;
  font-size: 100px;
}

#full_slider .control {
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 100px;
  width: 40px;
  height: 120px;
  line-height: 120px;
  overflow: hidden;
}

#full_slider .carousel-control-next {
  justify-content: flex-end;
}

#full_slider .carousel-control-prev {
  justify-content: flex-start;
}

.allcases {
  font-size: 18px;
  margin-top: auto;
}

.allcases a {
  color: #fff;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">All about us</h3>
          <p class="allcases">
            <a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="//code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Lorem ipsum dolor</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="//code-love.tk/video/protest.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Falling in love</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="//code-love.tk/video/koffe.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Coffe</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="//code-love.tk/video/commerciala.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Dealing with danger</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control carousel-control-prev" href="#full_slider" role="button" data-slide="prev">
	 <span class="control text-left"></span>
	 <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next">
	 <span class="control text-left"></span>
	 <span class="sr-only">Next</span>
   </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我的错误在哪里？

1 个答案:

答案 0 :(得分：1)

您的JavaScript有两个问题：

  1. 如果您在第一张幻灯片中，prev()将无法找到项目。同样适用于最后一张幻灯片，您将找不到next()项目。
  2. 似乎在触发onclick事件时，带有.active类的幻灯片不是您期望的新/即将推出的幻灯片，而是它仍然是旧的幻灯片，它在您单击下一个之前处于活动状态/ prev elements。

    3. 请参阅我的代码段示例，其中我只编辑了上述版本的JavaScript：如果条件要处理第一个和最后一个元素，我使用2。我还使用了bootstrap轮播触发的事件而不是你的自定义点击事件来获得正确的活动项目。

    var slider = $('#full_slider');

    var fullSliderNavigation = function(index) {
      var slide = slider.find('.carousel-item').eq(index);

      if (slide.is(':first-child')) {
        var ctrlPrevVal = slide.siblings(":last").find('.capt').text();
      } else {
        var ctrlPrevVal = slide.prev().find('.capt').text();
      }

      if (slide.is(':last-child')) {
        var ctrlNextVal = slide.siblings(":first").find('.capt').text();
      } else {
        var ctrlNextVal = slide.next().find('.capt').text();
      }

      var ctrlNext = slider.find('[data-slide="next"] > span');
      var ctrlPrev = slider.find('[data-slide="prev"] > span');
      ctrlNext.text(ctrlNextVal);
      ctrlPrev.text(ctrlPrevVal);
    }

    $(document).ready(function() {
      fullSliderNavigation(0);

      $(slider).on('slide.bs.carousel', function (event) {
        var index = $(event.relatedTarget).index();
        fullSliderNavigation(index);
      });
    });
    /* Slider homepage */

#full_slider .carousel-item {
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#full_slider .carousel-item.active {
  display: flex !important;
  position: relative;
}

#full_slider .carousel-item-left,
#full_slider .carousel-item-right {
  display: flex !important;
}

#full_slider video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
  z-index: -1;
}

#full_slider .video-caption {
  max-width: 595px;
  color: #fff;
}

#full_slider h3 {
  font-weight: 900;
  font-size: 100px;
}

#full_slider .control {
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 100px;
  width: 40px;
  height: 120px;
  line-height: 120px;
  overflow: hidden;
}

#full_slider .carousel-control-next {
  justify-content: flex-end;
}

#full_slider .carousel-control-prev {
  justify-content: flex-start;
}

.allcases {
  font-size: 18px;
  margin-top: auto;
}

.allcases a {
  color: #fff;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="page-wrapper">
  <div id="full_slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <video src="https://code-love.tk/video/koffee.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">All about us</h3>
          <p class="allcases">
            <a class="inherit" href="#"><a class="inherit" href="#">See more</a></a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/flamenco.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Lorem ipsum dolor</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/protest.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Falling in love</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/commerciala.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Coffe</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video src="https://code-love.tk/video/commerciala.mp4" autoplay loop muted></video>
        <div class="video-caption">
          <h3 class="capt text-boldest">Dealing with danger</h3>
          <p class="allcases">
            <a class="inherit" href="#">See more</a>
          </p>
        </div>
      </div>
    </div>
    <a class="carousel-control carousel-control-prev" href="#full_slider" role="button" data-slide="prev">
	 <span class="control text-left"></span>
	 <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control carousel-control-next" href="#full_slider" role="button" data-slide="next">
	 <span class="control text-left"></span>
	 <span class="sr-only">Next</span>
   </a>
  </div>
</div>

相关问题
最新问题