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

试试这个对我有用的东西，我使用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
        },
    }  
});

parallax.j和owl carousel 2滑块

1 个答案: