изменить анимацию слайдера prestashop - PullRequest
Новая
       8

изменить анимацию слайдера prestashop

1 голос
/ 30 сентября 2019

Мне нужно изменить стандартную анимацию слайдера изображений со слайда на затухание в 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.6, исчезает режим, но он не работает в prestashop 1.7. Может ли кто-нибудь мне помочь?

1 Ответ

1 голос
/ 30 сентября 2019

это поведение 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;, чтобы настроить время новой анимации

...