jssor responsive reduce number of slides
I found this question several times but with no answer.
I would like to make my jssor carousel really responsive with a few number of slides on smaller screens, instead of reducing the carousel width with the same number of slides.
There is an example of what exactly i'm looking for on mattel.com, where the carousel reduce from four to three, two and one slide depending on the screen width.
jssor_2_slider_init = function() {
var jssor_2_options = {
$AutoPlay: 1,
$AutoPlaySteps: 5,
$SlideDuration: 250,
$FillMode: 4,
$PauseOnHover: 3,
$SlideWidth: 225,
$SlideHeight: 225,
$SlideSpacing: 10,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 5
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingY: 10
}
};
var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);
/*#region responsive code begin*/
var MAX_WIDTH = 3000;
function ScaleSlider() {
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(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
jssor_2_slider_init();/*jssor slider loading skin double-tail-spin css*/
.jssorl-004-double-tail-spin img {
animation-name: jssorl-004-double-tail-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-004-double-tail-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*jssor slider bullet skin 031 css*/
.jssorb031 {position:absolute;}
.jssorb031 .i {position:absolute;cursor:pointer;}
.jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
.jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
.jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
.jssorb031 .i.idn {opacity:.3;}
/*jssor slider arrow skin 052 css*/
.jssora052 {display:block;position:absolute;cursor:pointer;}
.jssora052 .a {fill:none;stroke:#000;stroke-width:360;stroke-miterlimit:10;}
.jssora052:hover {opacity:.8;}
.jssora052.jssora052dn {opacity:.5;}
.jssora052.jssora052ds {opacity:.3;pointer-events:none;}<script src="https://www.jssor.com/script/jssor.slider-27.1.0.min.js"></script>
<div id="jssor_2" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-004-double-tail-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="img/double-tail-spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;">
<div style="background:green" data-fillmode="1" data-p="56.25"> </div>
<div style="background:blue" data-fillmode="1" data-p="56.25"> </div>
<div style="background:violet" data-fillmode="1" data-p="56.25"> </div>
<div style="background:red" data-fillmode="1" data-p="56.25"> </div>
<div style="background:orange" data-fillmode="1" data-p="56.25"> </div>
<div style="background:yellow" data-fillmode="1" data-p="56.25"> </div>
<div style="background:cyan" data-fillmode="1" data-p="56.25"> </div>
<div style="background:gray" data-fillmode="1" data-p="56.25"> </div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb031" style="position:absolute;bottom:15px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora052" style="width:55px;height:55px;top:85px;left:15px;" data-scale="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
</svg>
</div>
<div data-u="arrowright" class="jssora052" style="width:55px;height:55px;top:85px;right:15px;" data-scale="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
</svg>
</div>
</div>Solution
Ok, i found the solution on internet jssor/slider/examples-jquery/auto-center-with-no-scale.html. I don't know javascript, just copy-replace the responsive region of the script with some little modifications. See the difference running both code snippet on full page and resizing the window browser.
jssor_2_slider_init = function() {
var jssor_2_options = {
$AutoPlay: 1,
$AutoPlaySteps: 5,
$SlideDuration: 250,
$FillMode: 4,
$PauseOnHover: 3,
$SlideWidth: 225,
$SlideHeight: 225,
$SlideSpacing: 10,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 5
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$SpacingY: 10
}
};
var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);
//#region responsive code begin
//the following code is to place slider in the center of parent container with no scale
function ScaleSlider() {
var containerElement = jssor_2_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(containerWidth, jssor_2_slider.$OriginalWidth());
//scale the slider to original height with no change
jssor_2_slider.$ScaleSize(expectedWidth, jssor_2_slider.$OriginalHeight());
/*jssor_2_slider.$Elmt.style.left = ((containerWidth - expectedWidth) / 0) + "px";*/
}
else {
window.setTimeout(ScaleSlider, 120);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//#endregion responsive code end
};
jssor_2_slider_init();/*jssor slider loading skin double-tail-spin css*/
.jssorl-004-double-tail-spin img {
animation-name: jssorl-004-double-tail-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-004-double-tail-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*jssor slider bullet skin 031 css*/
.jssorb031 {position:absolute;}
.jssorb031 .i {position:absolute;cursor:pointer;}
.jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
.jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
.jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
.jssorb031 .i.idn {opacity:.3;}
/*jssor slider arrow skin 052 css*/
.jssora052 {display:block;position:absolute;cursor:pointer;}
.jssora052 .a {fill:none;stroke:#000;stroke-width:360;stroke-miterlimit:10;}
.jssora052:hover {opacity:.8;}
.jssora052.jssora052dn {opacity:.5;}
.jssora052.jssora052ds {opacity:.3;pointer-events:none;}<script src="https://www.jssor.com/script/jssor.slider-27.1.0.min.js"></script>
<div id="jssor_2" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-004-double-tail-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="img/double-tail-spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;">
<div style="background:green" data-fillmode="1" data-p="56.25"> </div>
<div style="background:blue" data-fillmode="1" data-p="56.25"> </div>
<div style="background:violet" data-fillmode="1" data-p="56.25"> </div>
<div style="background:red" data-fillmode="1" data-p="56.25"> </div>
<div style="background:orange" data-fillmode="1" data-p="56.25"> </div>
<div style="background:yellow" data-fillmode="1" data-p="56.25"> </div>
<div style="background:cyan" data-fillmode="1" data-p="56.25"> </div>
<div style="background:gray" data-fillmode="1" data-p="56.25"> </div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb031" style="position:absolute;bottom:15px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora052" style="width:55px;height:55px;top:85px;left:15px;" data-scale="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
</svg>
</div>
<div data-u="arrowright" class="jssora052" style="width:55px;height:55px;top:85px;right:15px;" data-scale="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
</svg>
</div>
</div>- Difference between AJAX request and a regular browser request
- Alpine.js menu toggle issue
- Intl.DateTimeFormat options hash: Getting leading zeros with '2-digit'
- Selenium won't work unless I actually look at the Web page (perhaps anti-crawler mechanism by JavaScript?)
- Checking if an object is array-like
- pinterest web scrape image
- Mapping through these JSON elements
- How can I enter data into a custom-handled input field?
- RegEx for Javascript to allow only alphanumeric
- How to export static images on Nextjs?
- Using UUID In Dynamic Namespace In Socket IO
- How can I copy rich text contents to the clipboard with JavaScript?
- Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
- AJAX implementation doesn't work properly for "like" button ASP.NET Core 2.1
- Jquery get form field value
- Deprecation Warning in Bootstrap SCSS
- How do I protect JavaScript files?
- CKEditor 5 toolbar fixed position
- Stop datepicker from floating around
- How to connect firebase firestore with my local firebase emulator suite?
- Transfer data with GOOGLE SHEETS
- Alert Box for webpage. Javascript/HTML
- why does javascript getMonth count from 0 and getDate count from 1?
- Delete a field from Firestore, with a dynamic key
- filter out object in array if object key value is null
- Is there an equivalent Javascript or Jquery sleep function?
- Why can Array.prototype methods be used with non-array objects?
- Turn off autocomplete for specific function in javascript in VS CODE
- JSON problem solution
- What happens when I add a module to the Global React object?