parallax.j和owl carousel 2滑块

Question

我有owl carousel 2滑块，我正在使用parallax.js在div背景上创建视差效果。https://pixelcog.github.io/parallax.js/

我的问题是:滑动点并不能切换图像--当我点击任意点时，总是会有第一张幻灯片。自动播放也是如此。有人能帮我吗？谢谢!

下面是我的代码：

<div class="parallax-container">
<div class="parallax-slider">
<div class="owl-carousel slider">

  <div class="slider-item thumbnail-cover d-flex flex-column justify-content-center"
    style="height: 100vh"
    data-bleed="50" data-speed="0.2" data-parallax="scroll" data-image-src="https://images.pexels.com/photos/2122831/pexels-photo-2122831.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    <div class="dust"></div>

    <div class="slider-desc">
      <h2>slide 1</h2>
    </div>
  </div>

  <div class="slider-item thumbnail-cover d-flex flex-column justify-content-center"
    style="height: 100vh"
    data-bleed="50" data-speed="0.2" data-parallax="scroll" data-image-src="https://images.pexels.com/photos/2212890/pexels-photo-2212890.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    <div class="dust"></div>

    <div class="slider-desc">
      <h2>slide 2</h2>
    </div>
  </div>

  <div class="slider-item thumbnail-cover d-flex flex-column justify-content-center"
    style="height: 100vh"
    data-bleed="50" data-speed="0.2" data-parallax="scroll" data-image-src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">


    <div class="slider-desc">
      <h2>slide 3</h2>
    </div>
  </div>
</div></div></div>

还有我的js：

$(".slider").owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        dots: true,
        margin: 0,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        autoplay: true,
        smartSpeed: 1000,
        autoplaySpeed: true,
        autoplayHoverPause: true,
        // navContainer: '#owl-reviews .owl-nav',
        // dotsContainer: '#owl-reviews .owl-dots'
    });

我试过这个https://github.com/pixelcog/parallax.js/pull/88，但它不起作用。请帮助:)

Answer 1

试试这个，它对我很有效，我用了两个项目：

$(".slider").owlCarousel({
    items:2,
    nav:true,
    animateIn: 'fadeIn',
    animateOut: 'fadeOut',
    autoplay: true,
    smartSpeed: 30000,
    dots:false,

    navText: [
        "<i class='fa fa-angle-left'></i>",
        "<i class='fa fa-angle-right'></i>"
    ],

    responsive: {
        0: {
            items: 1,
            slideBy:1
        },

        480: {
            items: 1,
            slideBy:1
        },

        960: {
            items: 2,
            slideBy:1
        },
    }  
});