javascript - 根据 slider 滑翔机 js 中的事件 li 值更改 css 值

Question

想要根据事件滑翔机 js li 值更改 css html 背景图像

这是CSS

html { 
  background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

我正在使用 Glider.js，所以当当前幻灯片在框架中时，类 glide__slide--active 被添加到

<div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage1.jpg">01</li>
      <li class="glide__slide glide__slide--active" data-image-value="https://bob.com/image/bigimage2.jpg" >02</li>
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage3.jpg">03</li>
    </ul>
</div> 

所以使用 jquery 更改背景图像的 url，值为 data-image-value

Answer 1

您需要使用 GlideJS Event API .

$(document).ready(function() {
  var glide = new Glide('.glide')

  // Listen to the move.after event (Called right after movement transition ends.)
  glide.on('move.after', function() {
    // Get the active slide and store it's data-image 
    const imageSrc = $('.glide__slide--active').attr('image');

    // Set the background
    $('html').css('background-image', 'url(' + imageSrc + ')');
  })

  glide.mount()
});

html {
  background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage1.jpg">01</li>
      <li class="glide__slide glide__slide--active" data-image-value="https://bob.com/image/bigimage2.jpg">02</li>
      <li class="glide__slide" data-image-value="https://bob.com/image/bigimage3.jpg">03</li>
    </ul>
  </div>
</div>