Javascript bxslider与视频和图像问题_Javascript_Bxslider

Javascript bxslider与视频和图像问题

javascript

Javascript bxslider与视频和图像问题,javascript,bxslider,Javascript,Bxslider,我正在尝试制作一个幻灯片，其中有一个视频和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-i

我正在尝试制作一个幻灯片，其中有一个视频和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>

我附上了一个截图，它在网站上的外观

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

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

</script>


$（函数（）{
$（'.bx'）.bxSlider({
模式：“淡入淡出”，
标题：对，
滑动宽度：0
});
});

此外，还加载了多个应删除的jquery库。确保只使用其中一个

整个项目将如下所示：














$（函数（）{
$（'.bx'）.bxSlider({
模式：“淡入淡出”，
标题：对，
滑动宽度：0
});
});

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

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

</script>


$（函数（）{
$（'.bx'）.bxSlider({
模式：“淡入淡出”，
标题：对，
滑动宽度：0
});
});

此外，还加载了多个应删除的jquery库。确保只使用其中一个

整个项目将如下所示：














$（函数（）{
$（'.bx'）.bxSlider({
模式：“淡入淡出”，
标题：对，
滑动宽度：0
});
});

我已经设法让它工作了，但它不是全屏的，只是在屏幕中央很小。我附上了一个截图和更新的编码

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






























$（函数（）{
$（'.bx'）.bxSlider({
模式：“淡入淡出”，
标题：对，
滑动宽度：600
});
});

我已经设法让它工作了，但它不是全屏的，只是在屏幕中央很小。我附上了一个截图和更新的编码

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






























$（函数（）{
$（'.bx'）.bxSlider({
模式：“淡入淡出”，
标题：对，
滑动宽度：600
});
});

我不确定您是否有权删除或编辑您的答案。如果可以，请删除您的其他答案，并考虑编辑原来的帖子（或答案）。我不能删除它不幸地编辑我的帖子。您可以将

slideWidth:600

更改为

slideWidth:0

，以使其全宽。我不确定您是否具有删除或编辑答案的权限。如果可以，请删除您的其他答案，并考虑编辑原来的帖子（或答案）。我不能删除它不幸地编辑我的帖子。您可以将

slideWidth:600

更改为

slideWidth:0

，以使其全宽。