Changing Slideshow effect from Sliding to Fading

Highlighted
Tourist
13 0 3

Searched for days everywhere for a way to change the slideshow effect from a carousel sliding type to a simple FADE. Found this post below from 2011 but it refers to a file called shop.js which I don't have. Ideally I would like a simple mod to code and not a new app solution.

https://ecommerce.shopify.com/c/ecommerce-design/t/changing-slider-from-rotating-to-fade-55878

My site is www.overtheboardwalk.com

Any help would be appreciated

0 Likes
Highlighted
Shopify Partner
1839 176 681

Hi Laurent,

You will need to edit your code. 1 line, no biggie. BUT FIRST, make a copy of your theme just in case.

Now fire up admin and navigate over to your Online Store > Themes > from the Actions drop down pick Edit code then in the assets tree, open up Assets / theme.js

Look for this bit of code

theme.Slideshow = function(el) {
  this.cache = {
    $slider: $(el),
    sliderArgs: {
      animation: 'slide',

See that animation: 'slide' there? Change that to

animation: 'fade',

And you're set ;-)

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
Shopify Partner
1839 176 681

Speaking of which, for all the options of FlexSlider, check here if you wish to customize other bits and bobs.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
13 0 3

Incredible!!! Cant believe it was not much more work than that. Found it in the theme.js.liquid file in the Supply theme.

I'll go through the attached documentation to find a way to tweek slide time from the current approx 5 seconds, to about 10 seconds.

Thanks a millions!!!

0 Likes
Highlighted
Tourist
9 0 2

Once again Shopify support: FAIL

0 Likes
Highlighted
New Member
3 0 0

Hi, 

Knowing that it is an old post, but I would like to know how to update the slideshow from slide to fading in / out in current version. Thanks. 

0 Likes