parallax.j 和 owl carousel 2 滑块答案

【问题标题】：parallax.j and owl carousel 2 sliderparallax.j 和 owl carousel 2 滑块
【发布时间】：2020-01-11 12:34:48
【问题描述】：

我有 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，但它不起作用。请帮忙:)

【问题讨论】：

标签： owl-carousel-2 parallax.js

【解决方案1】：

试试这个，它对我有用，我用了 2 个项目：

$(".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
        },
    }  
});

【讨论】：