根据滑块滑翔机 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，其值为数据图像值

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>

Answer 2

根据 glidejs 文档的事件部分，您可以监听转换结束，如下所示：

glide.on('move.after', function(event) {
// store the background in a variable
var newBG = $('.glide__slide--active').attr('data-image-value');
// apply the background image to the element (html or body...whatever you're using)
$('body').css('background-image', 'url(' + newBG + ')');
});

没有看到可复制的例子，这就是我能为你做的最好的事情。更多的代码会有所帮助。