How use jssor.slider.js in grapesjs
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 2.3k
- Forks
- 232
- PR merge metrics
- No merged PRs in 30d
Description
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: `
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' }
});
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No lory file, test, or entry point is identified; first verify that the report concerns lory rather than a separate GrapesJS/Jssor integration. Review the supplied bm.add('textslider') component and its script, then define a reproducible editor save-and-reload case before any lory change can be scoped.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 15/100