bxslider с выпуском видео и изображений - PullRequest
Новая
       11

bxslider с выпуском видео и изображений

1 голос
/ 20 марта 2019

Я пытаюсь сделать слайд-шоу, которое имеет одно видео и 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>

Я прикрепил скриншот того, как это выглядит на сайте

enter image description here enter image description here

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

Мне удалось заставить его работать, но он не в полноэкранном режиме, он только маленький в центре экрана. Я приложил скриншот и обновленную кодировку 

<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

0 голосов
/ 20 марта 2019

Следуя примеру из 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>
...