Question

我有一个bxslider包含一个视频作为第一张幻灯片，而不是三张幻灯片。如果视频结束，我可以在bxslider中自动滑动吗？

<ul class="bxslider" style="width: 615%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<li class="bx-clone" style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 50; display: block;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 0; display: none;">
<li class="bx-clone" style="float: left; list-style: outside none none; position: relative; width: 1298px; z-index: 50; display: block;">
</ul>


$('.bxslider').bxSlider({
      adaptiveHeight: true,
      mode: 'fade',
      pause: 3000,
    });

Answer 1

使用了视频事件ended和bxSlider方法goToNextSlide()。作为奖励，我使用了.each()，因此它能够支持多个视频，我还添加了一项功能，使用户可以点击视频中的任意位置暂停/播放。

注意：结尾和开头都有一个视频。

段

var bx = $(".bx").bxSlider({
  pager: false,
  nextText: '',
  prevText: ''
});

//Each .vid...
$('.vid').each(function(i) {
  //This is the regular vanilla 'this'.(optional/required for next function)
  var self = this;
  //Click on the video element to play or pause.(optional)
  $(this).on('click', function() {
    (self.paused) ? self.play(): self.pause();
  });
  //When this video ends, go to next slide
  $(this).on('ended', function() {
    bx.goToNextSlide();
  });
});

/* This centers the img and video */

img,
video {
  display: block;
  margin: 0px auto;
  cursor: pointer;
  min-height: 180px;
}

.bx-viewport {
  min-height: 90vh !important;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Multi BxSlider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

</head>

<body>

  <ul class="bx">
    <li data-idx="0">
      <video id="vid0" class="vid" src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" controls width='320' height='180' autoplay="autoplay" ></video>
    </li>
    <li data-idx="1">
      <img src="//dummyimage.com/320x180/000/fff.png&text=2">
    </li>
    <li data-idx="2">
      <img src="//dummyimage.com/320x180/000/fc0.png&text=3">
    </li>
    <li data-idx="3">
      <img src="//dummyimage.com/320x180/000/0ff.png&text=4">
    </li>
    <li data-idx="4">
      <video id="vid4" class="vid" src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" controls width='320' height='180' autoplay="autoplay" ></video>
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://cdn.jsdelivr.net/g/bxslider@4.2.12(jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>

</body>

</html>

Bxslider与视频和图像

1 个答案:

段