bxslider with videos and images issue

问题: I am trying to make a slideshow that has one video and 12 images but can't seem to get it working, I am trying to use bxslider as see it works with videos and images. My co...

问题:

I am trying to make a slideshow that has one video and 12 images but can't seem to get it working, I am trying to use bxslider as see it works with videos and images. My coding I have is below

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

I have attached a screenshot of how it looks on the site

enter image description here enter image description here


回答1:

Thank you Milad, I have updated the coding but still not working unfortunately, I wonder if it is conflicting with another js file, I have attached two screenshots, one with the inspect element in firefox

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

</script>

enter image description here

enter image description here


回答2:

I have managed to get it working but it's not full screen, it's only small in the center of the screen. I have attached a screenshot and the updated coding

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

enter image description here


回答3:

Following the example from bxslider, It seems like you forgot to add the following code to your project:

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

</script>

Also you have multiple jquery library loaded that should be removed. Make sure that only one of them is used.

The entire project will look like this:


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

  • 发表于 2019-03-21 14:13
  • 阅读 ( 285 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除