更改 prestashop 滑块动画

Question

我需要在 prestashop 1.7 中将默认的图像滑块动画从幻灯片更改为淡入淡出我尝试将 mode: fade, 添加到 homeslider.js，但没有帮助。这是 homeslider.js 文件：

    jQuery(document).ready(function ($) {
  var homesliderConfig = {
    speed: 500,            // Integer: Speed of the transition, in milliseconds
    timeout: $('.homeslider-container').data('interval'), // Integer: Time between slide transitions, in milliseconds
    nav: true,             // Boolean: Show navigation, true or false
    random: false,          // Boolean: Randomize the order of the slides, true or false
    pause: $('.homeslider-container').data('pause'), // Boolean: Pause on hover, true or false
    maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
    namespace: "homeslider",   // String: Change the default namespace used
    before: function(){},   // Function: Before callback
    after: function(){}     // Function: After callback
  };

  $(".rslides").responsiveSlides(homesliderConfig);

});

我在 prestashop 1.6 主题中看到的模式淡入淡出的东西，但它在 prestashop 1.7 中不起作用有人可以帮助我吗？

Answer 1

这是一个 CSS 行为，要更改它，您必须编辑滑块样式

在您的 CSS 文件中找到 .carousel-inner>.carousel-item 并更改

.carousel-inner>.carousel-item {
    position: absolute;
    transition: .6s ease-in-out;
    opacity:0;

}

接下来找到.carousel-inner>.carousel-item.active并添加不透明度：1

.carousel-inner>.carousel-item.active{
    transition: .6s ease-in-out;
    opacity: 1;
}

那你可以评论关注css

/*.carousel-inner>.active.left {*/
/*left: -100%*/
/*}*/

/*.carousel-inner>.active.right {*/
/*left: 100%*/
/*}*/

你还需要注释掉：

@media (-webkit-transform-3d),(transform-3d)

现在您的幻灯片处于淡入淡出模式，您只需使用 transition: all .6s linear; 调整新动画的时间

更改 prestashop 滑块动画

change prestashop slider animation

jquery

prestashop