animationsliderjssorcaptions

Jssor captions not animating


Jssor i great! - But when i included the banner in my code through my DNN7 CMS, the captions doesn't animate, even though the slides change as expected - i wrote:

    <div class="container" style="padding:0px !important">
    <div id="slider1_container" style="display: none; position: relative; margin: 0 0; width: 1100px; height: 300px; overflow: hidden;">
    <div style="cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1100px; height: 300px;" u="slides">
    <div><img src="/portals/0/designelementer/headlines/agHeader6.jpg" u="image" />
<div style="position:absolute;" t="ZM" u="caption">Bliv medlem</div>
</div>
<div><img src="/portals/0/designelementer/headlines/agHeader1.jpg" u="image" /></div></div></div></div>

You can see the page here: Link

(Beware, it's in danish)

Anybody got a hint for me? What am I doing wrong?


Solution

  • Please move $CaptionSliderOptions out from $BulletNavigatorOptions.

    replace

        $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
            $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
            $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
            $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
            $SpacingX: 12,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
            $SpacingY: 4,                                   //[Optional] Vertical space between each item in pixel, default value is 0
            $Orientation: 1,                                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            $Scale: false,                                   //Scales bullets navigator or not while slider scale
            $CaptionSliderOptions: {
                $Class: $JssorCaptionSlider$,
                $CaptionTransitions: _CaptionTransitions,
                $PlayInMode: 1,
                $PlayOutMode: 3
            }
        }
    

    with

        $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
            $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
            $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
            $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
            $SpacingX: 12,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
            $SpacingY: 4,                                   //[Optional] Vertical space between each item in pixel, default value is 0
            $Orientation: 1,                                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            $Scale: false                                   //Scales bullets navigator or not while slider scale
        },
        $CaptionSliderOptions: {
            $Class: $JssorCaptionSlider$,
            $CaptionTransitions: _CaptionTransitions,
            $PlayInMode: 1,
            $PlayOutMode: 3
        }