主页 / 问题 / 690474
Accepted
Елизавета Чепцова
Asked:2020-07-10 20:50:03 +0000 UTC2020-07-10 20:50:03 +0000 UTC

Owl Carousel 。幻灯片编号在字段中输入，当您单击按钮时，滑块应切换到此幻灯片

  • 772
    <header>
       <input><button>Start</button> 
        <div class="container">
            <ul>
                <li><a href="#slideshow">Главная</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#portfolio">Портфолио</a></li>
                <li><a href="#prices">Цены</a></li>
                <li><a href="#contacts">Контакты</a></li>
            </ul>
        </div>
    </header>

           var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', function() {
  console.log('установлен');
});
        $('.lp-slider2').owlCarousel({
            items: 1,
            nav: true,
            navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
            animateOut: 'fadeOut',

       margin:10,
    responsive:{
        0:{
            items:6
        },
        600:{
            items:5
        },            
        960:{
            items:3
        },
        1200:{
            items:1
        }
    }
    }).on('resize.owl.carousel', function() {
  console.log('resized');
}).on('translated.owl.carousel', function() {
  console.log('слайд прееключен');
});

    });
javascript

1 个回答

  1. Best Answer

    Owl Carousel 实现此类任务的功能相当薄弱，但如果滑块满足以下条件，一切都会完美无缺。

    条款：

    1. 不要安装loop:true，否则幻灯片的编号会误入歧途，结果会一团糟。
    2. 注明items:1，否则中指定的编号input.slide将不是幻灯片编号，而是页码。

    var owl = $('.owl-carousel');
owl.owlCarousel({
  items: 1,
  nav: true,
  dots: true,
  startPosition: 0,
  rewind: true
});

$('button.slide').on('click', function() {
  var slide = parseInt($('input.slide').val()) || 1;
  owl.trigger('to.owl.carousel', slide - 1);
});
    .item {
  height: 100px;
  background: #000;
  color: #fff;
}
    <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<input type="number" class="slide" />
<button class="slide">go to slide</button>

    • 2

相关问题