在幻灯片的每张幻灯片中初始化JQuery脚本

时间:2019-12-02 10:49:45

标签: javascript jquery uikit

我正在使用Uikit框架在我的网站上运行图像幻灯片。我想使用textillate plugin为出现在每张幻灯片上的每个文本设置动画。这样,当出现第一张幻灯片并且每次更改幻灯片时,滑块上的文本都将变为动画。 可以使用以下方式调用Uikit滑块:

var slideshow = UIkit.slideshow('#home-slideshow'); 

以下将调用文本动画:

$(function () {
    $('.tlt').textillate();
})

所以我使用以下代码组合了代码:

jQuery(function($) {

    // Initialize homepage slideshow
    var slideshow = UIkit.slideshow('#home-slideshow', {
        autoplay: true,
        autoplay-interval: 7000
    }); 

    // Variable with element that fire event
    var $slideItem = $('#home-slideshow ul li');

    $slideItem.on('itemshow', function() {
        $('.tlt').textillate({
            //initialDelay: 1500,
            // in animation settings
            in: {
                effect: 'flipInX', // set the effect name
                delayScale: 1.5, // set the delay factor applied to each consecutive character
                delay: 100, // set the delay between each character
                shuffle: false, // randomize the character sequence
                sync: false, // set to true to animate all the characters at the same time
            },          
            loop: false,
            type: 'char'
        });     
    });
})

但是,它不能很好地工作。文本动画在第一张幻灯片上触发,但是当幻灯片更改时,将不再应用该动画。 Uikit活动的幻灯片列表在此处-https://getuikit.com/docs/slideshow#javascript。我不是这方面的专家。我只尝试遵循文档。任何帮助将不胜感激。

0 个答案:

没有答案