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: .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 ?
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.pumatter./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 ?
Share Improve this question edited Jan 7, 2014 at 4:14 Daahrien 10.3k6 gold badges41 silver badges73 bronze badges asked Jan 7, 2014 at 4:11 CompuMatterCompuMatter 611 silver badge5 bronze badges2 Answers
Reset to default 4First I remend 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./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
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.