javascript - Remove white flash on Slick Slider fade transition - Stack Overflow

admin管理员组

文章数量:1021903

is there a way to remove the appearing FLASH, when using fade: true? I mean I understand that the opacity of the slides get 0 and 1 when changing and there is a point, where both slides have 0.5 opacity, so that you can see the background (white), that makes the transition feel like there is a white flashing. I can not think of a way to remove the "white flash", but giving the background another color. But that still gives a flash, but in another color.

Thanks in advance, Marc

  $('.home-slider').slick({
    draggable: true,
    autoplay: true,
    autoplaySpeed: 500,
    dots: true,
    fade: true,
    speed: 800,
    infinite: true,
    cssEase: 'ease-in-out',
    touchThreshold: 100
  })

<script src=".1.1/jquery.min.js"></script>
<script src=".9.0/slick.js"></script>
<link href=".9.0/slick.css" rel="stylesheet"/>



<div class="slideshow">
  <div class="home-slider">
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
  </div>
</div>

is there a way to remove the appearing FLASH, when using fade: true? I mean I understand that the opacity of the slides get 0 and 1 when changing and there is a point, where both slides have 0.5 opacity, so that you can see the background (white), that makes the transition feel like there is a white flashing. I can not think of a way to remove the "white flash", but giving the background another color. But that still gives a flash, but in another color.

Thanks in advance, Marc

  $('.home-slider').slick({
    draggable: true,
    autoplay: true,
    autoplaySpeed: 500,
    dots: true,
    fade: true,
    speed: 800,
    infinite: true,
    cssEase: 'ease-in-out',
    touchThreshold: 100
  })

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>



<div class="slideshow">
  <div class="home-slider">
    <div class="item">
      <img src="https://placeimg./640/480/nature" />
    </div>
    <div class="item">
      <img src="https://placeimg./640/480/animals" />
    </div>
  </div>
</div>

• javascript
• jquery
• html
• css
• slick.js

Share Improve this question Follow asked Apr 26, 2018 at 15:51 WiesenbergWiesenberg 6722 silver badges99 bronze badges 1

• 2 The only way to avoid that would be by stacking each slide on top of each other, then the fade transition would display the one at the bottom instead of the "white flash" - but I'm not sure that's something you can do with the Slick Slider plugin. You either ask the author about it or code your own version. – cabrerahector Commented Apr 26, 2018 at 16:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I know this is an old question but I was just looking to do the same and encountered it. So... after a little bit of digging, I came across the "speed" parameter which is a built-in parameter and allows you to control the fade speed.

You can simply set the speed to 30 (or 0)
that would give a feel of "no flashing" when the slider transition to the next slide.

Example:

    $('#pplGallerySlider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        speed: 30,  // this is the line that matters
        infinite: false,
    });

Hope this helps someone ;)

Let's try this css: transition: transform 5s ease, opacity 1s ease-out;

You can try to fix this by adding a delay on the transition.

It will let the slide move into the final position and then play the CSS animation of your choice. This way it seems we don’t have the broken animation on the last/cloned slide.

slick-slider .slick-track,
.slick-slider .slick-list
{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 10ms;
}

Hope it can help that bug. See also the git issue at: https://github./kenwheeler/slick/issues/1890

is there a way to remove the appearing FLASH, when using fade: true? I mean I understand that the opacity of the slides get 0 and 1 when changing and there is a point, where both slides have 0.5 opacity, so that you can see the background (white), that makes the transition feel like there is a white flashing. I can not think of a way to remove the "white flash", but giving the background another color. But that still gives a flash, but in another color.

Thanks in advance, Marc

  $('.home-slider').slick({
    draggable: true,
    autoplay: true,
    autoplaySpeed: 500,
    dots: true,
    fade: true,
    speed: 800,
    infinite: true,
    cssEase: 'ease-in-out',
    touchThreshold: 100
  })

<script src=".1.1/jquery.min.js"></script>
<script src=".9.0/slick.js"></script>
<link href=".9.0/slick.css" rel="stylesheet"/>



<div class="slideshow">
  <div class="home-slider">
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
  </div>
</div>

is there a way to remove the appearing FLASH, when using fade: true? I mean I understand that the opacity of the slides get 0 and 1 when changing and there is a point, where both slides have 0.5 opacity, so that you can see the background (white), that makes the transition feel like there is a white flashing. I can not think of a way to remove the "white flash", but giving the background another color. But that still gives a flash, but in another color.

Thanks in advance, Marc

  $('.home-slider').slick({
    draggable: true,
    autoplay: true,
    autoplaySpeed: 500,
    dots: true,
    fade: true,
    speed: 800,
    infinite: true,
    cssEase: 'ease-in-out',
    touchThreshold: 100
  })

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>



<div class="slideshow">
  <div class="home-slider">
    <div class="item">
      <img src="https://placeimg./640/480/nature" />
    </div>
    <div class="item">
      <img src="https://placeimg./640/480/animals" />
    </div>
  </div>
</div>

• javascript
• jquery
• html
• css
• slick.js

Share Improve this question Follow asked Apr 26, 2018 at 15:51 WiesenbergWiesenberg 6722 silver badges99 bronze badges 1

• 2 The only way to avoid that would be by stacking each slide on top of each other, then the fade transition would display the one at the bottom instead of the "white flash" - but I'm not sure that's something you can do with the Slick Slider plugin. You either ask the author about it or code your own version. – cabrerahector Commented Apr 26, 2018 at 16:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I know this is an old question but I was just looking to do the same and encountered it. So... after a little bit of digging, I came across the "speed" parameter which is a built-in parameter and allows you to control the fade speed.

You can simply set the speed to 30 (or 0)
that would give a feel of "no flashing" when the slider transition to the next slide.

Example:

    $('#pplGallerySlider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        speed: 30,  // this is the line that matters
        infinite: false,
    });

Hope this helps someone ;)

Let's try this css: transition: transform 5s ease, opacity 1s ease-out;

You can try to fix this by adding a delay on the transition.

It will let the slide move into the final position and then play the CSS animation of your choice. This way it seems we don’t have the broken animation on the last/cloned slide.

slick-slider .slick-track,
.slick-slider .slick-list
{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 10ms;
}

Hope it can help that bug. See also the git issue at: https://github./kenwheeler/slick/issues/1890

本文标签： javascriptRemove white flash on Slick Slider fade transitionStack Overflow