代码之家 › 专栏 › 技术社区 › Razvan Zamfir

自定义引导4全屏旋转木马错误:控件和标题之间的错误对应

twitter-bootstrap css html jquery javascript

Razvan Zamfir · 技术社区 · 7 年前

我在做一个全屏引导4旋转木马。幻灯片不包含图像,但是 视频和标题 .

我有 上一个和下一个 幻灯片控制 ,而不是“经典”箭头。

为此,我已经组合了一些自定义css和jquery。

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

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);
  }
  
});

/* 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="//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>

我的错误在哪里?

1 回复 | 直到 7 年前

MarvHock 7 年前

javascript有两个问题:

如果你在第一张幻灯片上, prev() 找不到项目。最后一张幻灯片也是这样,你找不到 next() 项目。
似乎在触发OnCutter事件的时候,带有Case.Active的幻灯片不是你期望的新的/即将到来的幻灯片,而是它仍然是旧的幻灯片,它在点击下一个/PREV元素之前是活动的。

请看我的代码片段示例,其中我只编辑了上述版本的javascript:我使用2 if条件来处理第一个和最后一个元素。我还使用了bootstrap carousel自己触发的事件,而不是自定义的click事件来拥有正确的活动项。

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>