loryjs / lory

☀ Touch enabled minimalistic slider written in vanilla JavaScript.
http://loryjs.github.io/lory/
MIT License
2.27k stars 244 forks source link

How use jssor.slider.js in grapesjs #766

Open karimiDev opened 5 years ago

karimiDev commented 5 years ago

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 commented 5 years ago

please help me @artf