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行为，要更改它，您必须编辑滑块样式

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

.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滑块动画

1 个答案: