Используйте навигацию по URL-адресу Owl Carousel Hash для изменения стиля кнопки

Вот моя карусель совы HTML и javascript.

HTML:

<div id="owl-demo" class="owl-carousel owl-theme">
   <div class="item" data-hash="slide1">
      <img src="images/mainslider.png">
      <h1>Heading</h1>
      <p>Paragraph Text</p>
   </div>
   <div class="item" data-hash="slide2">
      <img src="images/mainslider.png">
      <h1>Heading</h1>
      <p>Paragraph Text</p>
   </div>
   <div class="item" data-hash="slide3">
      <img src="images/mainslider.png">
      <h1>Heading</h1>
      <p>Paragraph Text</p>
   </div>
</div>

JavaScript:

    $("#owl-demo").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      items : 1, 
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      URLhashListener:true,
      autoplayHoverPause:true,
      startPosition: 'URLHash'
  });

У меня есть навигационный блок под ним, который использует хеш-навигацию по URL-адресу.

<nav class="navbar navbar-default secondary-navbar">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#slide1">Slide 1</a></li>
<li><a href="#slide2">Slide 2</a></li>
<li><a href="#slide3">Slide 3</a></li>
</ul>
</div>
</div>

When a slide is clicked to or comes on screen, I need the corresponding link to change it's styles to show it is the one currently active.

Я не нашел собственного способа сделать это в Owl Carousel и не был уверен, как это сделать с помощью Javascript.


javascript jquery css twitter-bootstrap owl-carousel
person Indigo Viking    schedule 16.03.2017    source источник
comment
Не могли бы вы создать fiddle?   -  person Guruprasad J Rao    schedule 16.03.2017
comment
я плохо пытаюсь настроить один вверх. раньше не использовал jsfiddle   -  person Indigo Viking    schedule 16.03.2017
comment
Я не мог понять, как настроить тот, который будет работать   -  person Indigo Viking    schedule 16.03.2017

Ответы (2)


arrow_upward
0
arrow_downward

Поигравшись в течение долгого времени, я нашел решение.

  1. Добавьте #link как класс в хеш-навигацию и еще один дополнительный класс в этом случае «слайдтабы», например. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
  2. Получить текущий элемент слайда, а затем его хэш данных
  3. Подайте этот хэш данных как класс измененной функции для добавления класса к кнопке навигации.
  4. Затем повторите то же самое для события изменения, чтобы удалить активный класс.
  5. Добавьте CSS в .slidetabs.active

$('.owl-carousel').on('changed.owl.carousel', function(event) { var current = event.item.index; var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash'); $('.'+hash).addClass('active'); });

$('.owl-carousel').on('change.owl.carousel', function(event) { var current = event.item.index; var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash'); $('.'+hash).removeClass('active'); });

Примечание: это работает так, как ожидалось, поэтому я больше не работал над этим, возможно, есть лучшие решения с хорошим кодированием.

далее приведен полный код:

HTML-код слайдера:

<div class="owl-carousel owl-theme owl-loaded owl-drag">
   <div class="owl-stage-outer">
      <div class="owl-stage">
         <div class="owl-item">
            <div class="item" data-hash="cowboy_coaster">
               <!-- Slide Content -->
            </div>
         </div>
         <div class="owl-item">
            <div class="item" data-hash="night_tubing">
               <!-- Slide Content -->
            </div>
         </div>
         <!-- . -->
         <!-- . -->
         <!-- . -->
         <!-- . -->
      </div>
   </div>
</div>
</div>
<div class="owl-nav">
   <button type="button" role="presentation" class="owl-prev">
      <img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
      <div class="slider-counter">1 / 4</div>
   </button>
   <button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
   <ul>
      <li>
         <a class="dining slidetabs active" href="#dining">DINING</a>
      </li>
      <li>
         <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
      </li>
      <li>
         <a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
      </li>
      <li>
         <a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
      </li>
   </ul>
</div>

Javascript:

jQuery(document).ready(function($) {
  $('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
    if (!e.namespace)  {
      return;
    }
    var carousel = e.relatedTarget;
    $('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
    }).owlCarousel({
      nav:true,
      navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
      loop:true,
      slideSpeed : 300,
      paginationSpeed : 400,
      items:1,
      dots:false,
      URLhashListener:true,
      startPosition: 'URLHash',
      autoplay:true,
      autoplayTimeout:9000,
      autoplayHoverPause:true,
      animateOut: 'fadeOut',
      animateIn: 'fadeIn',
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:1,
            nav:true
        },
        1000:{
            items:1,
            nav:true
        }
    }
  });

    $('.owl-carousel').on('changed.owl.carousel', function(event) {
      var current = event.item.index;
      var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
      $('.'+hash).addClass('active');
    });

    $('.owl-carousel').on('change.owl.carousel', function(event) {
      var current = event.item.index;
      var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
      $('.'+hash).removeClass('active');
    });

});

CSS:

.slidetabs.active {
    color: #ce2d27;
    text-decoration: underline;
}
person Wasim Sayyed    schedule 22.01.2019

arrow_upward
0
arrow_downward

Owl Carousel изначально поддерживает это, см. здесь в документации: https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

person mrsq    schedule 16.03.2017
comment
спасибо за предложение страницы. я уже нашел это, но я действительно ничего не понимаю или как это работает. Мои познания в Javascript очень ограничены. Хотя спасибо за ссылку - person Indigo Viking; 16.03.2017