Question

96

Jssor slider transitions

rated 0 times [ 102] [ 6] / answers: 1 / hits: 10688 / 11 Years ago, fri, january 17, 2014, 12:00:00

I'm trying to implement a transition effect on my Jssor slider, but I'm unsure where to place the options.

The website has a transition code generator which I used, but no matter where I seem to place the code the slider doesn't use the transition.

This is my current attempt:

<script type=text/javascript>

        jQuery(document).ready(function ($) {

            var options =

            {

                $DragOrientation: 3,

                $AutoPlay: true,

                $SlideDuration: 1500,

                $AutoPlayInterval: 4500,

                $SlideshowOptions: {

                    $Transitions: { $Duration: 600, $Delay: 50, $Cols: 8, $Rows: 4, $FlyDirection: 5, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $Assembly: 1028, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 }

                }

            }

            var jssor_slider1 = new $JssorSlider$('banner_slider', options);

        });

    </script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nadiaa

Add To Favorites

Follow

Total Points: 572

Total Questions: 113

Total Answers: 113

Location: Mauritania

Member since Sun, Oct 17, 2021

3 Years ago

answered 11 Years ago ellisw · Accepted Answer

I managed to find a working example and found out the correct format:

<script type=text/javascript>

    jQuery(document).ready(function ($) {

        var _SlideshowTransitions = [{

            $Duration: 600,

            $Delay: 50,

            $Cols: 8,

            $Rows: 4,

            $FlyDirection: 5,

            $Formation:

            $JssorSlideshowFormations$.$FormationZigZag,

            $Assembly: 1028,

            $ChessMode: { $Column: 3, $Row: 12 },

            $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad },

            $Opacity: 2

        }];

        var options = {

            $DragOrientation: 3,

            $AutoPlay: true,

            $SlideDuration: 1500,

            $AutoPlayInterval: 4500,

            $SlideshowOptions: {                                //Options which specifies enable slideshow or not

                $Class: $JssorSlideshowRunner$,                 //Class to create instance of slideshow

                $Transitions: _SlideshowTransitions,            //Transitions to play slide, see jssor slideshow transition builder

                $TransitionsOrder: 1,                           //The way to choose transition to play slide, 1 Sequence, 0 Random

                $ShowLink: 2,                                   //0 After Slideshow, 2 Always

                $ContentMode: false                             //Whether to trait content as slide, otherwise trait an image as slide

            }

        };

        var jssor_slider1 = new $JssorSlider$(banner_slider, options);

    });

</script>