javascript - GlideJS 中的第一张幻灯片正在闪烁

问题描述

当以某种周期性更改滑块中的幻灯片时，从第一张幻灯片更改到最后一张幻灯片时，第一张幻灯片会闪烁。

该错误仅出现在 Chrome 中。我注意到，如果您将浏览器窗口最小化然后最大化，则该错误会更频繁地出现（但这不确定:)）。

https://github.com/glidejs/glide/issues/300的解决方案没有帮助！

我整理了一个小演示：https ://codepen.io/depressingutopian/pen/jOwvpGQ?editors=1111

const initCarousel = () => {
    const slides = document.querySelectorAll('.glide__slide');
    if (slides.length) {
        const sliderConfiguration = {
            gap: 0,
            type: 'carousel',
            autoplay: '1000',
            animationDuration: '500',
            hoverpause: false,
            keyboard: true,
            animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
            swipeThreshold: 0,
            dragThreshold: false
        };
        const slider = new Glide('.map-banner', sliderConfiguration);
        slider.mount();
    }
}

initCarousel();

.section-default {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  font-family: 'FiraSans';
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  min-width: 320px;
  -webkit-overflow-scrolling:  touch;
  -webkit-text-size-adjust: none;
}

.layout {
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.layout__content {
   -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mb-p, .mb-sm {
    margin-bottom: 1.5rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: 0px;
}

.color-common {
    color: #424242;
}
body, html {
    font-family: 'FiraSans';
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: none;
}

html {
    font-size: 16px;
}

ul {
    list-style-type: none;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.map-banner {
    margin: 1.5rem auto 0;
    width: 79rem;
    cursor: default;
}

.glide--swipeable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.glide {
    position: relative;
    box-sizing: border-box;
}

.map-banner .glide__slide_narrow {
        padding: 0 1.5rem;
    }

 .map-banner .glide__arrow {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

 .map-banner .glide__arrow_prev {
        left: -5px;
        transform: translateY(-50%) rotate(90deg);
  }

  .map-banner .glide__arrow_next {
        right: -5px;
        transform: translateY(-50%) rotate(270deg);
   }

   .map-banner .glide__arrow-img {
        width: 2rem;
        height: 2rem;
   }

.map-banner .map-banner__transfer {
    img {
        height: 12rem;
    }
}

.slider {
    img {
        width: 100%;
    }
}

.map-banner__main {
    display: flex;
    width: 100%;
    height: 24rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.glide__track {
  
  margin-left: 12px;
  margin-right: 12px;
}

.map-banner__main_0 {
    background-image: url('https://i.imgur.com/gleemJV.png');
}

.map-banner__main_1 {
    background-image: url('https://i.imgur.com/oF41CCc.png');
}

.map-banner__main_2 {
    background-image: url('https://i.imgur.com/oEVQL4F.png');
}

// Flickering bug fix (Attempt)
.glide__slide--active {
    z-index: 1;
}

<link rel="stylesheet" href="https://unpkg.com/@glidejs/glide@3.3.0/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide" type="text/javascript"></script>

<div class="section-default platform_unknown">
  <div class="layout layout_full_height color-common">
    <div class="layout__content">
      <section class="mb-sm mb-mob-none">
         <div class="glide map-banner">
            <div class="glide__track" data-glide-el="track">
               <ul class="glide__slides">
                  <li class="glide__slide slider">
                    <img class ="map-banner__main" src="https://i.imgur.com/gleemJV.png"/>
                  </li>
                  <li class="glide__slide slider">
                     <img class ="map-banner__main" src="https://i.imgur.com/oF41CCc.png"/>
                  </li>
                  <li class="glide__slide slider">
                     <img class ="map-banner__main" src="https://i.imgur.com/oEVQL4F.png"/>
                  </li>
               </ul>
            </div>
         </div>
      </section>
    </div>
  </div>
</div>

我将感谢所有可以帮助修复此错误的人。

标签： javascripthtmlcsscss-animationsglidejs

javascript - GlideJS 中的第一张幻灯片正在闪烁

问题描述

解决方案

推荐阅读