0

I have owl carousel 2 slider and I'm using parallax.js to create parallax effect on div background. https://pixelcog.github.io/parallax.js/

My problem: slider dots does not switch the images - when I click to any dot, there is always the first slide. The same with autoplay. Can anybody help me with this? Thanks!

Here is my code:

<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>

And my 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'
    });

I was trying this https://github.com/pixelcog/parallax.js/pull/88 but it does not work. Please for help :)

Natalia
  • 1,009
  • 2
  • 11
  • 24

1 Answers1

0

Try this it works for me i use 2 items:

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