Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How use jssor.slider.js in grapesjs #766

Open
karimiDev opened this issue Aug 1, 2019 · 1 comment
Open

How use jssor.slider.js in grapesjs #766

karimiDev opened this issue Aug 1, 2019 · 1 comment

Comments

@karimiDev
Copy link

I've added 'jssor.slider.js' file to the body.
When I add a slider component, the slider works but I can't change the image or add a new one to the slider.

And also when I save the page and want to edit the page
The slider doesn't work,
error: $Jease$ is not defined
Cannot read property 'currentStyle' of undefined

my code:
bm.add('textslider', {

        label: 'slider',
         category: 'more',
         content: {
             content: `<textslider>  <div id="jssor_2" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:380px;overflow:hidden;visibility:hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
        <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
    </div>
    <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
        <div>
            <img data-u="image" src="@Global.BASE_URL/images/Template/a1.jpg" />
            <div data-u="thumb">Slide Description 001</div>
        </div>
        <div>
            <img data-u="image" src="@Global.BASE_URL/images/Template/a2.jpg" />
            <div data-u="thumb">Slide Description 002</div>
        </div>
        <div>
            <img data-u="image" src="@Global.BASE_URL/images/Template/a3.jpg" />
            <div data-u="thumb">Slide Description 003</div>
        </div>
    </div>
    <!-- Thumbnail Navigator -->
    <div data-u="thumbnavigator" style="position:absolute;bottom:0px;left:0px;width:980px;height:50px;color:#FFF;overflow:hidden;cursor:default;background-color:rgba(0,0,0,.5);">
        <div data-u="slides">
            <div data-u="prototype" style="position:absolute;top:0;left:0;width:980px;height:50px;">
                <div data-u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
            </div>
        </div>
    </div>
    <!-- Arrow Navigator -->
    <div data-u="arrowleft" class="jssora061" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
        <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <path class="a" d="M11949,1919L5964.9,7771.7c-127.9,125.5-127.9,329.1,0,454.9L11949,14079"></path>
        </svg>
    </div>
    <div data-u="arrowright" class="jssora061" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
        <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
            <path class="a" d="M5869,1919l5984.1,5852.7c127.9,125.5,127.9,329.1,0,454.9L5869,14079"></path>
        </svg>
    </div>
</div></textslider>`,
             script: function () {
                var jssor_2_SlideshowTransitions = [
          {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
          {$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
        ];

        var jssor_2_options = {
          $AutoPlay: 1,
          $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: jssor_2_SlideshowTransitions,
            $TransitionsOrder: 1
          },
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Orientation: 2,
            $NoDrag: true
          }
        };

        var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

        /*#region responsive code begin*/

        var MAX_WIDTH = 980;

        function ScaleSlider2() {
            var containerElement = jssor_2_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;

            if (containerWidth) {

                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                jssor_2_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider2, 30);
            }
        }

        ScaleSlider2();

        $(window).bind("load", ScaleSlider2);
        $(window).bind("resize", ScaleSlider2);
        $(window).bind("orientationchange", ScaleSlider2);
             },
         },
        attributes: { class: 'fas fa-sliders-h' }
     });
@karimiDev
Copy link
Author

please help me
@artf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant