英文:
Get text from current element in autoplay carousel using javascript
问题
我正在WordPress中使用Wow Carousel，并希望获取滑块中当前元素的文本。
在Wow Carousel中，当前幻灯片会带有类名"center"。
我的问题是，自动播放滑块中存储在我的变量中的值不会自动更改。
如何在每次自动添加类名"center"时触发该函数？
我的代码如下：
<div id="testimonial-slider-5781" class="owl-carousel owl-loaded owl-drag">
<div class="owl-item active" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3>文本</h3>
</div></div>
<div class="owl-item active" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3>文本</h3>
</div></div>
<div class="owl-item active center" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3>文本</h3>
</div></div>
<div class="owl-item" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3>文本</h3>
</div></div>
</div>
jQuery(document).ready(function() {
function myFunction() {
let title = jQuery("#testimonial-slider-5781 .center .testimonial-5781 h4").text();
jQuery("#service-title h3").text(title);
}
jQuery('.owl-prev').click(function(){
myFunction();
});
jQuery('.owl-next').click(function(){
myFunction();
});
});
英文:
I'm using Wow carousel in WordPress, and I want to get the text in the current element in the slider.
In Wow Carousel, the current slide takes the class center
My problem with the autoplay slider, the value stored in my variable doesn't change automatically
How can I fire the function when the class center is added automatically every time?
My code
<div id="testimonial-slider-5781" class="owl-carousel owl-loaded owl-drag">
<div class="owl-item active" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
<div class="owl-item active" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
<div class="owl-item active center" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
<div class="owl-item" style="width: 235.333px; margin-right: 15px;"><div class="testimonial-5781">
<h3> text </h3>
</div>
</div>
jQuery(document).ready(function() {
function myFunction() {
let title = jQuery( "#testimonial-slider-5781 .center .testimonial-5781 h4" ).text();
jQuery("#service-title h3").text(title);
}
jQuery('.owl-prev').click(function(){
myFunction();
});
jQuery('.owl-next').click(function(){
myFunction();
});
});
答案1
得分: 2
你可以监听 translated.owl.carousel 事件，因为它在每次轮播被翻译时触发，这意味着它也会在当前幻灯片添加类 center 时触发。
以下是一个示例，根据您自己的代码进行适当的调整。
jQuery(document).ready(function() {
function myFunction() {
let title = jQuery("#testimonial-slider-5781 .center .testimonial-5781 h3").text();
jQuery("#service-title h3").text(title);
}
jQuery("#testimonial-slider-5781").on("translated.owl.carousel", function() {
myFunction();
});
});
英文:
You can listen to translated.owl.carousel event since it's triggered everytime carousel is translated, that would mean it's also triggered when class center is added to current slide.
Here is an example, do adapt to your own code as appropriate.
jQuery(document).ready(function() {
function myFunction() {
let title = jQuery("#testimonial-slider-5781 .center .testimonial-5781 h3").text();
jQuery("#service-title h3").text(title);
}
jQuery("#testimonial-slider-5781").on("translated.owl.carousel", function() {
myFunction();
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论