Настройка слайдера для карусели совы - PullRequest
Новая
       21

Настройка слайдера для карусели совы

0 голосов
/ 30 октября 2018 
    <div class="owl-carousel">
            <div class="item">
              <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
             <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>

          </div>

  var owl = $('.owl-carousel');
  owl.owlCarousel({
    loop: true,
    items: true,
    nav: false,
    navText: false,
    autoplay:true,
    smartSpeed:4000,
    autoplayTimeout:100,
    dots: true,
    autoWidth: false,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  })

Привет, ребята, я создаю слайдер, используя совую карусель. Но мне нужно настроить их, как в разделе в ссылке, которую я прикрепил ниже (раздел чуть выше «Подать заявку сейчас для ваших детей»). http://preview.themeforest.net/item/kidstar-kindergarten-school-html-template/full_screen_preview/19514751 Я могу показать вам мой код, который я использовал. Пожалуйста, пройдите через это и, пожалуйста, помогите мне. Спасибо, ребята.

1 Ответ

0 голосов
/ 30 октября 2018

Они используют другую версию owl.carousel.js, она не последняя. Это проблема. Я не знаю, какой номер. Вы должны связаться с Путь к шаблону https://themeforest.net/user/template_path и запросить у них дополнительную информацию.

Для меня это может быть 2.3.2. потому что с этим карусель работает хорошо. 

$(function() {
    var owl = $('.owl-carousel');

    owl.owlCarousel({
        loop: true,
        nav: false,
        items: true,
        navText: false,
        autoplay:true,
        smartSpeed:4000,
        autoplayTimeout:100,
        dots: true,
        autoWidth: false,
        responsive: {
            0:{
                items:1,
                loop:true
            },
            480:{
                items:2,
                loop:true
            },
            768:{
                items:3,
                loop:true
            },
            1000:{
                items:4,
                loop:true
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" rel="stylesheet" >
<div class="owl-carousel">
  <div class="item">
    <h2>Swipe</h2>
  </div>
  <div class="item">
    <h2>Drag</h2>
  </div>
  <div class="item">
    <h2>Responsive</h2>
  </div>
  <div class="item">
    <h2>CSS3</h2>
  </div>
  <div class="item">
    <h2>Fast</h2>
  </div>
  <div class="item">
    <h2>Easy</h2>
  </div>
  <div class="item">
    <h2>Free</h2>
  </div>
  <div class="item">
    <h2>Upgradable</h2>
  </div>
  <div class="item">
    <h2>Tons of options</h2>
  </div>
  <div class="item">
    <h2>Infinity</h2>
  </div>
  <div class="item">
    <h2>Auto Width</h2>
  </div>
   <div class="item">
    <h2>Swipe</h2>
  </div>
  <div class="item">
    <h2>Drag</h2>
  </div>
  <div class="item">
    <h2>Responsive</h2>
  </div>
  <div class="item">
    <h2>CSS3</h2>
  </div>
  <div class="item">
    <h2>Fast</h2>
  </div>
</div>
...