■I want to change the effect of slideshow on top page. ※ I use Shopify
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want to change the effect of slideshow on top page. ※ I use Shopify
I want to make it more slow fade like this web sight 'http://www.foxclassics.com.au/' .
※I use the same template of this ' http://themes.shopify.com/themes/seasons/styles/spring '.
※I want to change the same page of this ' http://barrel-chocolate.myshopify.com/ '.

I will send you an invitation mail to edit this codes on shopify.
Could you edit the codes?

I am posting 8 requests.
I'm happy if you check other requests.

awarded to tomtoump

Crowdsource coding tasks.

2 Solutions


please give me the access so I could repair that for you

    $('#HomeSlides').flexslider({ 
        animation: 'fade', 
        directionNav: false, 
        pauseOnAction: false, 
        slideshowSpeed: 7000, 
        animationSpeed: 800, // <= you must change that to something like 3000
        easing: "easeOutExpo", 
        start: function() { 
            $('#HomeSlides').delay(300).animate({ opacity: 1 }, 650);         
            ieSliderResize(); 
        }, 
          before: function() { 
            homeSlideCenter(); 
          }, 
        after: function() { 
            var slider1 = $('#HomeSlides').data('flexslider');
            slider1.resize();
        }
    });
Thank you for your solutions. Could you send me your E-mail address to ' senmoto66@yahoo.co.jp '?
Satou almost 6 years ago
Winning solution

Open the "Template Editor" and locate your theme's init.js file. You have to replace the code @ochi posted above with the following:

var flexslider;

$('#HomeSlides').flexslider({ 
    easing: "linear", 
    slideshowSpeed: 5000,
    animationSpeed: 1000, 
    controlNav: false,
    keyboard: false,  
    start: function(slider) { 
        flexslider = slider;
        $('#HomeSlides').delay(300).animate({ opacity: 1 }, 650);         
        ieSliderResize(); 
    }, 
    before: function() { 
        homeSlideCenter();
        flexslider.slides.eq(flexslider.animatingTo).delay(1000); 
    }, 
    after: function() { 
        var slider1 = $('#HomeSlides').data('flexslider');
        slider1.resize();
    }
});  


(bad quality, but you get the idea)

I could add it directly to your shopify if you want.

View Timeline