I need to change the default image slider animation from slide to fade in prestashop 1.7 I tried to add mode: fade, to homeslider.js, but it did not help. here is the homeslider.js file:
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);
});
The mode fade thing I saw in a prestashop 1.6 topic, but it does not work in prestashop 1.7 Can somebody help me?
it's a CSS behavior, to change it you have to edit your slider styles
find .carousel-inner>.carousel-item into your CSS files and change in
.carousel-inner>.carousel-item {
position: absolute;
transition: .6s ease-in-out;
opacity:0;
}
next find .carousel-inner>.carousel-item.active and add opacity: 1
.carousel-inner>.carousel-item.active{
transition: .6s ease-in-out;
opacity: 1;
}
then you can comment the follow css
/*.carousel-inner>.active.left {*/
/*left: -100%*/
/*}*/
/*.carousel-inner>.active.right {*/
/*left: 100%*/
/*}*/
you also need to be comment out:
@media (-webkit-transform-3d),(transform-3d)
now your slide is in fade mode you have only to play with transition: all .6s linear; to adjust the timing of new animation
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments