主页 / 问题 / 1021151
Accepted
Игорь
Asked:2020-09-07 15:18:13 +0000 UTC2020-09-07 15:18:13 +0000 UTC

猫头鹰旋转木马2。单击循环时居中缩略图：true

  • 772

有两个 owl-carousels：preview 和 main。他们是同步的。两个旋转木马都有loop: true。owl-item单击时无法使预览滑块居中 -s。我究竟做错了什么？

沙盒在这里。我将用注释标记负责所需行为的代码centered items（注释将在两个地方）。

$(document).ready(function() {

    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4;
    var syncedSecondary = true;

    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: true,
        autoplay: false, 
        dots: true,
        loop: true,
        responsiveRefreshRate: 200,
        navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
    }).on('changed.owl.carousel', syncPosition);

  sync2.on('initialized.owl.carousel', function() {
    sync2.find(".owl-item.center").eq(0).addClass("current");
  })
  
  /* centered items */
  sync2.find('.owl-item').each(function(index) {
    var item = $(this).attr('data-position', index);
  })
  
  sync2.owlCarousel({
    items: slidesPerPage,
    dots: false,
    nav: false,
    loop: true,
    center: true,
    smartSpeed: 200,
    slideSpeed: 1000,
    slideBy: slidesPerPage,
    responsiveRefreshRate: 100
  }).on('click', '.owl-item', function(e) {
        var carouselSync1 = $('#sync1').data('owl.carousel');
        e.preventDefault();
    
        var current = $(this).index();
        carouselSync1.to(carouselSync1.relative(current));
        
        /* centered items */
        sync2.trigger('to.owl-carousel', $(this).data('position'));
      });

    function syncPosition(el) {
       
        var current = el.item.index;
      
        sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
        var onscreen = sync2.find('.owl-item.active').length - 1;
        var start = sync2.find('.owl-item.active').first().index();
        var end = sync2.find('.owl-item.active').last().index();
      
        if (current > end) {
          sync2.data('owl.carousel').to(current, 100, true);
        }
        if (current < start) {
          sync2.data('owl.carousel').to(current - onscreen, 100, true);
        }
    }

    function syncPosition2(el) {
      if (syncedSecondary) {
        var number = el.item.index;
        sync1.data('owl.carousel').to(number, 100, true);
      }
    }
});
#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#sync2 .item {
  background: #c9c9c9;
  padding: 10px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>




<div id="sync1" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

javascript

1 个回答

  1. Best Answer

    $(document).ready(function() {

  const sync1 = $("#sync1");
  const sync2 = $("#sync2");
  let slidesPerPage = 4;
  let syncedSecondary = true;
  
  let call_first = true;
  let correct = 1;

  sync1.owlCarousel({
      items: 1,
      slideSpeed: 2000,
      nav: true,
      autoplay: false, 
      dots: true,
      loop: true,
      responsiveRefreshRate: 200,
      navText: [
        `<svg width="100%" height="100%" viewBox="0 0 11 20">
          <path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/>
        </svg>`,
        `<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1">
          <path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/>
        </svg>`
      ],
      afterAction : syncPosition,
  }).on('changed.owl.carousel', syncPosition);

  

  sync2.owlCarousel({
    items: slidesPerPage,
    dots: false,
    nav: false,
    loop: true,
    center: true,
    smartSpeed: 200,
    slideSpeed: 1000,
    slideBy: slidesPerPage,
    onInitialized: carousel2Initialized,
    responsiveRefreshRate: 100,
  }).on('changed.owl.carousel', el =>{
    sync1.trigger('to.owl.carousel', [el.item.index + 4, 200, true]);
  });


  $('#sync2').on('click', '.owl-item', function(e) {
    const carousel = $('.owl-carousel').data('owl.carousel');
    e.preventDefault();
    if (call_first) {
      call_first = false;
      carousel.to(carousel.relative($(this).index()));
      sync1.trigger('to.owl.carousel', [carousel.relative($(this).index()), 200, true]);
    } else {
      carousel.to(carousel.relative($(this).index()));
    }  
  });

  $('.owl-prev').on('click', () => {
    if (call_first) {
     correct = -1;
    }
  });

  function syncPosition(el) {
    if (call_first) {  
      setTimeout(() => {
        call_first = false;
        sync2.find(".owl-item").removeClass("current").removeClass('active');
        sync2.trigger("to.owl.carousel", [correct, 300, true]);
        sync2.find(".owl-item.center").addClass("current");
      }, 0 );
    } else {
      sync2.find(".owl-item").removeClass("current").removeClass('active');
      sync2.trigger("to.owl.carousel", [el.item.index - 4, 300, true] );
    }
    sync2.find(".owl-item.center").addClass("current");
  }
  
  function carousel2Initialized () {
    $('#sync2 .owl-item.center').addClass('current');
  }
  

});
    #sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#sync2 .item {
  background: #c9c9c9;
  padding: 10px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>

<div id="sync1" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

    UPD在点击时获取索引。

    • 7

相关问题