帶動畫的滑動滑塊

我正在使用滑動滑塊在我的網站上有動畫。除非當我拖動幻燈片，如果不移動到下一張或上一張幻燈片我不想使用動畫，一切都很好。帶動畫的滑動滑塊

<div id="my_slider"> 
    <div id="item"> 
    <div id="name" class="hidden">slide1</div> 
    </div> 
    <div id="item"> 
    <div id="name" class="hidden">slide2</div> 
    </div> 
    <div id="item"> 
    <div id="name" class="hidden">slide3</div> 
    </div> 
</div>

這裏是jsfiddle

來源

2016-05-17 elene

您是否在談論幻燈片文本上的縮放動畫「滑件」？ – Yass

您使用的name的id爲多個項目，這是無效的。 id必須始終是唯一的。除了使用id定位幻燈片名稱外，您還可以指定一個通用類，例如slide-name

爲了使功能按照您的意願工作，您必須使用在afterChange事件之後運行的名爲的附加事件。但是，在引入其他事件處理程序之前，需要使用beforeChange事件跟蹤當前幻燈片，然後檢查下一張幻燈片是否與afterChange事件中的當前幻燈片匹配。如果當前幻燈片和下一張幻燈片匹配（未發生變化），請跳過動畫。如果它們不匹配（發生更改），請觸發動畫。

僅噹噹前幻燈片和下一張幻燈片不匹配（即活動幻燈片已更改）時，才使用afterChange事件啓動動畫。使用變量來跟蹤當前和下一張幻燈片分別爲currSlide和nextSlide。然後在事件中，您可以通過比較currSlide到nextSlide來觸發動畫。

最後，我添加了一個輔助方法，將class的hidden應用於當前不可見的幻燈片名稱。這可以防止文本過早出現並破壞動畫。我在init以及事件中調用此方法。

更新的HTML

<div id="my_slider"> 
    <div class="item"> 
    <div id="name1" class="slide-name hidden">slide1</div> 
    </div> 
    <div class="item"> 
    <div id="name2" class="slide-name hidden">slide2</div> 
    </div> 
    <div class="item"> 
    <div id="name3" class="slide-name hidden">slide3</div> 
    </div> 
</div>

jQuery的

$('#my_slider').on('init', function(event, slick) { 
    $('.slick-active .slide-name').removeClass('hidden'); 
    applyHiddenClass(); 
}) 

$('#my_slider').slick({ 
    arrows: false, 
    speed: 900, 
}); 

var currSlide = 0; 
var nextSlide = 0; 

function applyHiddenClass() { 
    $.each($('.slick-slide'), function() { 
    if ($(this).attr('aria-hidden') == 'true') { 
     $(this).find('.slide-name').addClass('hidden'); 
    } else { 
     $(this).find('.slide-name').removeClass('hidden'); 
    } 
    }); 
} 

$('#my_slider').on('afterChange', function(event, slick, currentSlide) { 
    nextSlide = currentSlide; 
    if (nextSlide !== currSlide) { 
    $('.slick-active .slide-name').removeClass('animated zoomIn'); 
    $('.slick-active .slide-name').addClass('hidden'); 
    } 
}); 

$('#my_slider').on('setPosition', function(event, slick, currentSlide) { 
    if (nextSlide !== currSlide) { 
    $('.slick-active .slide-name').removeClass('hidden'); 
    $('.slick-active .slide-name').addClass('animated zoomIn'); 
    } 
    applyHiddenClass(); 
}); 

$('#my_slider').on('beforeChange', function(event, slick, currentSlide) { 
    currSlide = currentSlide; 
});

Fiddle Demo

如果您有任何疑問，請詢問。

來源

2016-05-18 17:32:38 Yass

「ids必須始終是唯一的」，但是您在包裝div上放置了一些複製的ID。好的解決方案。 – Anfelipe

好點，我已經更新了答案。 – Yass

試試這個;設定速度爲零禁用動畫：

$('#my_slider').slick({ 
    arrows: false, 
    speed: 0, 
});

來源

2016-05-17 13:43:43

我不想禁用動畫。如果滑塊移動到下一張或上一張幻燈片，我只想使用它。 – elene

帶動畫的滑動滑塊

回答

相關問題