[SOLVED]How to make home slider fade in version 1.6?

[tatamimi]

Hello!

Does someone know how to make home slider images change with fade effect?
I read the topic here

http://www.prestashop.com/forums/topic/262083-solved-how-to-make-home-slider-fade/


but I couldn't do it in latest version (1.6.0.6)...

Edited April 25, 2014 by tatamimi (see edit history)

[dioniz]

Open yourdomain/themes/yourtheme/js/modules/homeslider/js/homeslider.js

 

and change this:

if (!!$.prototype.bxSlider)
        $('#homeslider').bxSlider({
            useCSS: false,
            maxSlides: 1,
            slideWidth: homeslider_width,
            infiniteLoop: homeslider_loop,
            hideControlOnEnd: true,
            pager: false,
            autoHover: true,
            auto: homeslider_loop,
            speed: homeslider_speed,
            pause: homeslider_pause,
            controls: true
        });

to this

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

[tatamimi]

Thank you very much dioniz!!!!

It's perfect!!! so cool!


At first, I changed the code in this file

mydomain/modules/homeslider/js/homeslider.js   and failed

I didn't know there is the js folder in theme folder... I have to learn much more...


Anyway, Thanks a lot!

 

[tatamimi]

...How to change topic name to  [solved]? please help...

[dioniz]

You are welcome tatamimi

 

Here's how to change to solved

 

To mark a topic as [solved] :

- Edit the first post of your topic by clicking on the "Edit" button,

- Click on the "Use full editor" button,

- Add the "[solved]" string at the beginning of your topic title and click on the "Submit Modified Post" button.

 

[tatamimi]

So kind!
Thank you again dioniz!!!

[roz]

is there a way to have more than one transition effect in the home slider?

[dioniz]

Hey Roz

I'm not sure bxslider supports that ,but you can always use some other free slider.

[uddhava]

I got confused from the multiple "advices" given on this forum. So here the correct answer:

The Homeslider settings are controlled by 2 files:

1. /modules/homeslider/js/homeslider.js
2. /themes/YOURTHEME/js/modules/homeslider/js/homeslider.js

The 2nd js file "overrides" the first one. So you need to change/add your settings in the 2nd file.

 

 

is there a way to have more than one transition effect in the home slider?

 

the bxslider is quite powerful. Check out http://bxslider.com/options

Here is the info from the BXSlider support page :

 

mode

Type of transition between slides

default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'

Edited April 30, 2014 by uddhava (see edit history)

[ZinC]

I got confused from the multiple "advices" given on this forum. So here the correct answer:

The Homeslider settings are controlled by 2 files:

1. /modules/homeslider/js/homeslider.js
2. /themes/YOURTHEME/js/modules/homeslider/js/homeslider.js

The 2nd js file "overrides" the first one. So you need to change/add your settings in the 2nd file.

That's what dioniz wrote.

 

When I add the 'fade' mode the whole slide just disappears. But when I add 'vertical' it works. What's wrong?

[dioniz]

ZinC is it possible to see your site with fade mode on?

[ZinC]

Site not ready yet. I'm working locally in xampp.

 

Edit: It's working just fine now. I just left my computer for a while and when I came back the fade effect was working as it should. I didn't change anything. It seems it just needed some time to warm up

Edited May 1, 2014 by ZinC (see edit history)

[dioniz]

Or to calm down

[ZinC]

Unfortunatly, changing mode to 'fade' still make the whole slide disappear. It worked as I mentioned earlier but not anymore. I didn't do any other changes other than adding the "mode" line.This only happens in Firefox, not IE. I'll stick to 'vertical' mode for now but I like 'fade' better - if only it worked.

[vekia]

there are two possibilities:

1) you see cached .js version of this module

2) you changed something wrong (missing semicolon, missing comma before mode argument)

 

i checked this on my own demo store and works well

[ZinC]

there are two possibilities:

1) you see cached .js version of this module

2) you changed something wrong (missing semicolon, missing comma before mode argument)

 

i checked this on my own demo store and works well

Can't be. It works when I change to 'vertical' so it can't be neithe cache nor markup issue. And as I said, it works in IE browser (IE Tab Firefox addon). Thanks for trying.

[tatamimi]

For me, it works well (in safari, firefox, chrome...).

(But the speed of transition is too fast and can't change in the back-end, I'm trying to change and seeing js source...)
 

[dioniz]

Zinc, try to set height in js file and see if it works

[vekia]

Zinc, can you check also what you've got in console? it spawns some errors?

[ZinC]

Zinc, can you check also what you've got in console? it spawns some errors?

Can't find debug console. I'm not a dev. just a simple designer

 

Zinc, try to set height in js file and see if it works

Doesn't change anything. Added height in css where it was set to 'auto' but it only shows an empty space in slide area.

[nocturnal]

Unfortunately, changing mode to 'fade' still make the whole slide disappear. It worked as I mentioned earlier but not anymore. I didn't do any other changes other than adding the "mode" line.This only happens in Firefox, not IE. I'll stick to 'vertical' mode for now but I like 'fade' better - if only it worked.

I have EXACTLY the same problem.  You add the mode 'fade' line (being careful about precise punctuation) and the slider completely disappears in Firefox only. It works in Safari, Chrome, IE and Opera.

Edited May 10, 2014 by nocturnal (see edit history)

[ZinC]

I have EXACTLY the same problem.  You add the mode 'fade' line (being careful about precise punctuation) and the slider completely disappears in Firefox only. It works in Safari, Chrome, IE and Opera.

One odd thing about this is that when I toggle developer toolbar or want to inspect the page with firebug or web developer, the slider reappears (with fade effect). I exit web developer and hit refresh and the slider disappears

[weaver]

One odd thing about this is that when I toggle developer toolbar or want to inspect the page with firebug or web developer, the slider reappears (with fade effect). I exit web developer and hit refresh and the slider disappears

 

Same here, appears when firebug on, disappears with firebug shut and page refreshed ... Don't work on IE. Any solution?

[webu]

Did anyone find a way to fix it ?

[wlp]

Same problem here... anyone found a fix for this?

[w3bsolutions]

Same here, it only works after opening the firebug inspector.

 

EDIT: I cleared the cache in Firefox and it is working fine now.

Edited October 3, 2014 by fire2 (see edit history)

[NATg]

Great dioniz,

 

Added this

 

mode: 'fade',

 

Fade effect works fine in Chrome and Firefox.

Changing speed works from BO.

 

 

Using Prestashop 1.6.0.9