FlexSlider не отображается должным образом - PullRequest
0 голосов
/ 15 марта 2019

Изображения отображаются один под другим, без элементов javascript, и я попытался переместить и проверить расположение файлов и снова загрузить весь пакет, но, похоже, это не работает.Я также использовал сову карусель, так что, возможно, это может быть причиной.Баннер находится в правильном положении.Кажется, jquery или js не могут быть найдены.Я думаю, что мог положить что-то не туда.

<head>
<link href="html/assets/css/style1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="html/assets/Carousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="html/assets/Carousel/dist/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="html/assets/css/flexslider.css" type="text/css">
<script src="html/assets/js/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500');
</style>
</head>

<body>

<section id="banner">
  <div class="flexslider">
    <ul class="slides">
      <li> <img alt="" src="html/assets/images/building.png"></li>
      <li> <img alt="" src="html/assets/images/building.png"></li>
      <li> <img alt="" src="html/assets/images/building.png"></li>
      <li> <img alt="" src="html/assets/images/building.png"></li>
    </ul>
  </div>
</section>

<script src="html/assets/Carousel/docs/assets/vendors/jquery.min.js"></script> 
<script src="html/assets/Carousel/dist/owl.carousel.min.js"></script> 
<script>
            $(document).ready(function() {
              var owl = $('.owl-carousel');
              owl.owlCarousel({
                margin: 10,
                nav: true,
                loop: true,
                responsive: {
                  0: {
                    items: 1
                  },
                  600: {
                    items: 3
                  },
                  1000: {
                    items: 4
                  }
                }
              })
            })
          </script>
</body>
...