Animated Homeslider Content in Prestashop 1.6

Animated Homeslider Content in Prestashop 1.6

Here is a small tip on how to make homeslider content animated. Examples of animation can be found in the following themes I’ve created: СRAFT and GLAM

I used animate.css and wow.js for all the website animation. The first thing we need is to upload these files into css and js folders, then link them into header:

It’s a simple thing to apply animation on any element of the site, but it’s some issue with the homeslider. Animations don’t work for default mode of the bxSlider. It works for fade mode only.

So we need to apply fade mode to homeslider. Open file homeslider.js (js/modules/homeslider/js/homeslider.js) and set fade mode:

Open your global.js file and set animation type and delay for homeslider content .homeslider-description h2 and .homeslider-description p‘ :

That’s all.



5 comments

  1. Hi Lena,

    I’ve done the steps and not working properly.
    Only makes the effect on the images the first time that images change when restarts again, the first image is not doing.
    Please, can you help me?

    Thanks

  2. Hi Oscar.

    Please, provide your link to take a look at, for fade mode it should work.

  3. Hi,

    I´m working in localhost.
    I set the configuration as in the post but only once has the effect on the images, when again the first image again, will no longer load the configuration

    homeslider.js

    $(document).ready(function(){

    if (typeof(homeslider_speed) == ‘undefined’)
    homeslider_speed = 500;
    if (typeof(homeslider_pause) == ‘undefined’)
    homeslider_pause = 3000;
    if (typeof(homeslider_loop) == ‘undefined’)
    homeslider_loop = true;
    if (typeof(homeslider_width) == ‘undefined’)
    homeslider_width = 2050;

    if (!!$.prototype.bxSlider)
    $(‘#homeslider’).bxSlider({
    useCSS: false,
    maxSlides: 1,
    slideWidth: homeslider_width,
    infiniteLoop: homeslider_loop,
    hideControlOnEnd: true,
    pager: false,
    mode:’fade’,
    autoHover: true,
    auto: homeslider_loop,
    speed: parseInt(homeslider_speed),
    pause: homeslider_pause,
    controls: true

    });

    $(‘.homeslider-description’).click(function () {
    window.location.href = $(this).prev(‘a’).prop(‘href’);
    });
    });

    global.js

    $(document).ready(function() {
    $(‘.homeslider-description h2’).addClass(‘wow fadeInUp’);
    $(‘.homeslider-description p’).addClass(‘wow fadeInUp’);
    $(‘.homeslider-description h2’).css(‘-webkit-animation-delay’, ‘0.2s’);
    $(‘.homeslider-description p’).css(‘-webkit-animation-delay’, ‘0.4s’);
    });

    Thanks.

  4. Hi Lena,

    I’ve got. wow is changed by animated

    $(‘.homeslider-description h2’).addClass(‘wow fadeInUp’);
    $(‘.homeslider-description p’).addClass(‘wow fadeInUp’);

    $(‘.homeslider-description h2’).addClass(‘animated fadeInUp’);
    $(‘.homeslider-description p’).addClass(‘animated fadeInUp’);

    Thanks

Post a new comment

top