Question

我正在尝试制作一个包含一个视频和12张图像但似乎无法正常运行的幻灯片，我正在尝试使用bxslider，因为它可以与视频和图像一起使用。我的编码如下

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<div class="col-md-12">
<ul class="bx">
    <li data-idx="0">
      <video id="vid0" class="vid" src="https://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" controls width='320' height='180' autoplay="autoplay" ></video>
    </li>
    <li data-idx="1">
      <img src="https://dummyimage.com/320x180/000/fff.png&text=2">
    </li>
    <li data-idx="2">
      <img src="https://dummyimage.com/320x180/000/fc0.png&text=3">
    </li>
    <li data-idx="3">
      <img src="https://dummyimage.com/320x180/000/0ff.png&text=4">
    </li>
    <li data-idx="4">
      <video id="vid4" class="vid" src="https://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" controls width='320' height='180' autoplay="autoplay" ></video>
    </li>
  </ul>
</div>

<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>

<!-- main jQuery /-->
<script src="js/jquery.js"></script>
<!-- jQuery plugins /-->
<script src="js/plugins.js"></script>
<!-- jQuery meanmenu /-->
<script src="js/jquery.meanmenu.js"></script>
<!-- bootstrap /-->
<script src="js/bootstrap.min.js"></script>
<!-- count to /-->
<script src="js/jquery.countTo.js"></script>
<!-- owl carousel /-->
<script src="js/owl.carousel.min.js"></script>
<!-- validate /-->
<script src="js/validation.js"></script>
<!-- mixit up /-->
<script src="js/jquery.mixitup.min.js"></script>
<!-- easing /-->
<script src="js/jquery.easing.min.js"></script>
<!-- gmap helper /-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHzPSV2jshbjI8fqnC_C4L08ffnj5EN3A"></script>

<script src="js/map-helper.js"></script>
<!-- fancy box /-->
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.appear.js"></script>
<!-- isotope script /-->
<script src="js/isotope.js"></script>
<script src="js/jquery.prettyPhoto.js"></script> 
<script src="js/jquery.magnific-popup.min.js"></script> 
<script src="js/jquery.bootstrap-touchspin.js"></script>

<!-- jQuery ui js /-->
<script src="js/jquery-ui.js"></script>
<script src="js/SmoothScroll.js"></script>
<!-- thm custom script /-->
<script src="js/custom.js"></script>

我已经附上了它在网站上的外观的屏幕截图

Answer 1

以bxslider中的示例为例，似乎您忘记了将以下代码添加到您的项目中：

<script >
  $(function () {
      $('.bx').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 0
      });
    });

</script>

您还加载了多个应该删除的jquery库。确保只使用其中之一。

整个项目将如下所示：


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

    <div class="col-md-12">
      <ul class="bx">
        <li data-idx="0">
          <video id="vid0" class="vid" src="https://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" controls
            width='320' height='180' autoplay="autoplay"></video>
        </li>
        <li data-idx="1">
          <img src="https://dummyimage.com/320x180/000/fff.png&text=2">
        </li>
        <li data-idx="2">
          <img src="https://dummyimage.com/320x180/000/fc0.png&text=3">
        </li>
        <li data-idx="3">
          <img src="https://dummyimage.com/320x180/000/0ff.png&text=4">
        </li>
        <li data-idx="4">
          <video id="vid4" class="vid" src="https://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" controls
            width='320' height='180' autoplay="autoplay"></video>
        </li>
      </ul>
    </div>


    <script src="https://cdn.jsdelivr.net/g/bxslider@4.2.12(jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>


    <!-- main jQuery /-->
    <script src="js/jquery.js"></script>
    <!-- jQuery plugins /-->
    <script src="js/plugins.js"></script>
    <!-- jQuery meanmenu /-->
    <script src="js/jquery.meanmenu.js"></script>
    <!-- bootstrap /-->
    <script src="js/bootstrap.min.js"></script>
    <!-- count to /-->
    <script src="js/jquery.countTo.js"></script>
    <!-- owl carousel /-->
    <script src="js/owl.carousel.min.js"></script>
    <!-- validate /-->
    <script src="js/validation.js"></script>
    <!-- mixit up /-->
    <script src="js/jquery.mixitup.min.js"></script>
    <!-- easing /-->
    <script src="js/jquery.easing.min.js"></script>
    <!-- gmap helper /-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHzPSV2jshbjI8fqnC_C4L08ffnj5EN3A"></script>

    <script src="js/map-helper.js"></script>
    <!-- fancy box /-->
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="js/jquery.appear.js"></script>
    <!-- isotope script /-->
    <script src="js/isotope.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.bootstrap-touchspin.js"></script>

    <!-- jQuery ui js /-->
    <script src="js/jquery-ui.js"></script>
    <script src="js/SmoothScroll.js"></script>
    <!-- thm custom script /-->
    <script src="js/custom.js"></script>
    <script >
      $(function () {
          $('.bx').bxSlider({
            mode: 'fade',
            captions: true,
            slideWidth: 0
          });
        });

    </script>

Answer 2

我设法使其正常运行，但它不是全屏显示，只是在屏幕中央很小。我已经附上了屏幕截图和更新的编码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<div class="col-md-12">
  <ul class="bx">
    <li data-idx="0">
      <video id="vid0" class="vid" src="videos/ecotec-filters-ltd.mp4" controls width='320' height='180' autoplay="autoplay"></video>
    </li>
    <li data-idx="1">
      <img src="images/slideshow/field-pounds.jpg">
    </li>
    <li data-idx="2">
      <img src="images/slideshow/red-sunset.jpeg">
    </li>
    <li data-idx="3">
      <img src="images/slideshow/office.jpg">
    </li>
    <li data-idx="4">
      <img src="images/slideshow/polygonum-bistorta.jpeg">
    </li>
      <li data-idx="5">
      <img src="images/slideshow/notahill.jpeg">
    </li>
      <li data-idx="6">
      <img src="images/slideshow/products-header-new.jpg">
    </li>
      <li data-idx="7">
      <img src="images/slideshow/hepa-banner.jpg">
    </li>
      <li data-idx="8">
      <img src="images/slideshow/panel-banner-new.jpg">
    </li>
      <li data-idx="9">
      <img src="images/slideshow/rigidcellbanner.jpg">
    </li>
      <li data-idx="10">
      <img src="images/slideshow/carbonfilter.jpg">
    </li>
      <li data-idx="11">
      <img src="images/slideshow/new-products-header.jpg">
    </li>
      <li data-idx="12">
      <img src="images/slideshow/ecotec-made-in-britain.jpg">
    </li>
  </ul>
</div>

<script src="js/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/g/bxslider@4.2.12(jquery.bxslider.min.js+vendor/jquery.fitvids.js)"></script>

<script src="js/plugins.js"></script>

<script src="js/jquery.meanmenu.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.countTo.js"></script>

<script src="js/owl.carousel.min.js"></script>

<script src="js/jquery.mixitup.min.js"></script>

<script src="js/jquery.easing.min.js"></script>

<script src="js/jquery.fancybox.pack.js"></script>

<script src="js/jquery.appear.js"></script>

<script src="js/isotope.js"></script>

<script src="js/jquery.prettyPhoto.js"></script>

<script src="js/jquery.magnific-popup.min.js"></script>

<script src="js/jquery.bootstrap-touchspin.js"></script>

<script src="js/jquery-ui.js"></script>

<script src="js/SmoothScroll.js"></script>

<!-- thm custom script /-->
<script src="js/custom.js"></script>

<script >
  $(function () {
      $('.bx').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 600
      });
    });

</script>

bxslider出现视频和图像问题

2 个答案: