CODEWITHSUNDEEP
javascriptjquery
CompuMatter
CompuMatter

Reputation: 61

Can't get jssor jQuery slider to fade

The code clearly states $Fade:true, $Duration:1000 are the variables to put in _SlideshowTransitions. I have done so but cannot for the life of me get a fading action on the pictures.

My page can be seen here: http://shuksanhealth.compumatter.com/ecore/test.php and a view source will tell it all. Having said that, here's the code.

Anyone out there familiar with this product and why this fade transition will not work ?

Upvotes: 2

Views: 4074

Answers (2)

Leonardo Borsten
Leonardo Borsten

Reputation: 41

This is how I got it to work:

var options = { $AutoPlay: true, $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: [{ $Duration:700, $Fade: true, $Opacity:2 }] } };

The documentation is indeed not clear.

Upvotes: 4

Leo
Leo

Reputation: 580

First I recommend you load jquery before plugin.

Second point I could not find any doc that show that fade work like this. It is not that clear.

Found this code on Github Developer

    var _SlideshowTransitions = [
    //Fade
    {$Duration: 700, $Opacity: 2, $Brother: { $Duration: 1000, $Opacity: 2} }
    ];

Source: https://github.com/jssor/slider.js/blob/master/examples-jquery/slider-with-slideshow.source.source.html

Maybe you want to try and modify it instead of using your: 

        var _SlideshowTransitions = [{ 
            $Duration: 2000, 
            // $Delay: 30, 
            // $Cols: 8, 
            // $Rows: 4, 
            // $Top: true, 
            // $Right: true, 
            // $Bottom: true, 
            // $Left: true, 
             $Fade: true
            // $SlideOut: true, 
            // $Assembly: 2049, 
            // $Easing: $JssorEasing$.$EaseOutQuad, 
            // $Formation: $JssorSlideshowFormations$.$FormationStraightStairs 
            // $Formation: $JssorSlideshowFormations$.$FormationStraightStairs 
            }];

I did a simple test and it worked

Upvotes: 4

Related Questions