Animated Homeslider Content in Prestashop 1.6

Jul 24, 2015

418 Lena Tsybulenko

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:

Igor Dragun

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Igor


ecommerce development

Ecommerce Development

Take your online store to the next level with BelVG ecommerce development

Visit the page

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


That’s all.

Looking for an outstanding ready-made PrestaShop theme? Visit BelVG PrestaShop store and find a wide selection of modern design templates.

Igor Dragun

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Igor

5 Comments

  1. 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

  2. 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.

  3. Hi Oscar.

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

  4. 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

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *