javascript jssor 滑块宽度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24292398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 02:31:26 来源:igfitidea点击:
jssor slider width issues
提问by Timothy Radzikowski
Super confused on how to adjust the width of this slider...
对如何调整此滑块的宽度感到非常困惑...
I've tried editing the jquery where you see it commented out:
我试过编辑 jquery，你看到它被注释掉了：
jQuery(document).ready(function ($) {
var nestedSliders = [];
$.each(["sliderh1_container", "sliderh2_container", "sliderh3_container"], function (index, containerId) {
var nestedSliderOptions = {
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 200, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 150, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 3, //[Optional] Space between each slide in pixels, default value is 0
$DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0,
var options = {
$AutoPlay: false, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$AutoPlayInterval: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 300, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 80, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 150, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 3, //[Optional] Space between each slide in pixels, default value is 0
$DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
$DragOrientation: 0, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0),
I've tried editing the CSS and when i make it bigger.. say 900 pixels.. it actually get's smaller:
我试过编辑 CSS，当我让它变大时.. 说 900 像素.. 它实际上变得更小：
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div>
<div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img u="image" src="/jssor/img/landscape/05.jpg" /></div>
<div><img u="image" src="/jssor/img/landscape/06.jpg" /></div>
<div><img u="image" src="/jssor/img/landscape/07.jpg" /></div>
<div><img u="image" src="/jssor/img/landscape/01.jpg" /></div>
<div><img u="image" src="/jssor/img/landscape/02.jpg" /></div>
<div><img u="image" src="/jssor/img/landscape/03.jpg" /></div>
<div><img u="image" src="/jssor/img/landscape/04.jpg" /></div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb03" style="position: absolute; bottom: 10px; right: 10px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
</div>
<!-- Bullet Navigator Skin End -->
</div>
<div u="thumb">
<img src="/jssor/img/nested-thumb/landscape.jpg" />
<div class="title_back"></div>
<div class="title">
Landscape
</div>
</div>
</div>
<div>
<div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img u="image" src="/jssor/img/motor/001.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/002.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/003.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/004.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/005.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/006.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/007.jpg" /></div>
<div><img u="image" src="/jssor/img/motor/008.jpg" /></div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb03" style="position: absolute; bottom: 10px; right: 10px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
</div>
<!-- Bullet Navigator Skin End -->
@jssor is really good at comments but I'm certain that I can't figure this out now..
@jssor 非常擅长评论，但我确定我现在无法弄清楚这一点..
As usual.. any help would be greatly appreciated. Thank you.
像往常一样......任何帮助将不胜感激。谢谢你。
Additionally, here is a link to look at it here:
此外，这里有一个链接可以在这里查看：
http://phpbuilds.com/Jssor.Slider.FullPack/demos-jquery/nested-slider.source.html
http://phpbuilds.com/Jssor.Slider.FullPack/demos-jquery/nested-slider.source.html
采纳答案by Antoine Cloutier
I believe you're looking for this line:
我相信你正在寻找这条线：
<div id="sliderh1_container" class="sliderh1" style="position:
relative; top: 0px; left:0px; width: 600px; height: 300px;">
EDIT
编辑
Here is one example of a slider that I have on a website.
这是我在网站上使用的滑块示例。
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 285px; height: 285px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 285px; height: 285px; overflow: hidden;">
...
Also, I am not sure as to why you have this twice:
另外，我不确定为什么你有两次：
<!-- Slides Container -->
...
EDIT2 - The good one
EDIT2 - 好的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nested Slider Demo - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function ($) {
var nestedSliders = [];
$.each(["sliderh1_container", "sliderh2_container", "sliderh3_container"], function (index, containerId) {
var nestedSliderOptions = {
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 200, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 150, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 3, //[Optional] Space between each slide in pixels, default value is 0
$Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$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
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 10, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 0, //[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
}
};
nestedSliders.push(new $JssorSlider$(containerId, nestedSliderOptions));
});
var options = {
$AutoPlay: false, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$AutoPlayInterval: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 300, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 80, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 150, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 3, //[Optional] Space between each slide in pixels, default value is 0
$Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 0, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
$DragOrientation: 0, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0),
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$AutoCenter: 3, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
$Rows: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$Cols: 3, //[Optional] Number of pieces to display, default value is 1
$Align: 0, //[Optional] The offset position to park thumbnail
$Orientation: 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
$DisableDrag: false //[Optional] Disable drag or not, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function OnMainSliderPark(currentIndex, fromIndex) {
$.each(nestedSliders, function (index, nestedSlider) {
nestedSlider.$Pause();
});
setTimeout(function () {
nestedSliders[currentIndex].$Play();
}, 2000);
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark);
OnMainSliderPark(0, 0);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 960));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- sliderh style begin -->
<style>
/* jssor slider bullet navigator skin 03 css */
/*
.jssorb03 div (normal)
.jssorb03 div:hover (normal mouseover)
.jssorb03 .av (active)
.jssorb03 .av:hover (active mouseover)
.jssorb03 .dn (mousedown)
*/
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av
{
background: url(../img/b03.png) no-repeat;
overflow:hidden;
cursor: pointer;
}
.jssorb03 div { background-position: -5px -4px; }
.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
.jssorb03 .av { background-position: -65px -4px; }
.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
</style>
<!-- sliderh style end -->
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 960px; height: 400px; overflow: hidden; ">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
overflow: hidden;">
<div>
<div id="sliderh1_container" class="sliderh1" style="position: relative; top: 0px; left: 0px; width: 960px;
height: 400px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
overflow: hidden;">
<div><img u="image" src="../img/landscape/05.jpg" /></div>
<div><img u="image" src="../img/landscape/06.jpg" /></div>
<div><img u="image" src="../img/landscape/07.jpg" /></div>
<div><img u="image" src="../img/landscape/01.jpg" /></div>
<div><img u="image" src="../img/landscape/02.jpg" /></div>
<div><img u="image" src="../img/landscape/03.jpg" /></div>
<div><img u="image" src="../img/landscape/04.jpg" /></div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
</div>
<!-- Bullet Navigator Skin End -->
</div>
<div u="thumb">
<img src="holder.js/320x160">
<div class="title_back"></div>
<div class="title">
Landscape
</div>
</div>
</div>
<div>
<div id="sliderh2_container" class="sliderh2" style="position: relative; top: 0px; left: 0px; width: 960px;
height: 400px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
overflow: hidden;">
<div><img u="image" src="../img/motor/001.jpg" /></div>
<div><img u="image" src="../img/motor/002.jpg" /></div>
<div><img u="image" src="../img/motor/003.jpg" /></div>
<div><img u="image" src="../img/motor/004.jpg" /></div>
<div><img u="image" src="../img/motor/005.jpg" /></div>
<div><img u="image" src="../img/motor/006.jpg" /></div>
<div><img u="image" src="../img/motor/007.jpg" /></div>
<div><img u="image" src="../img/motor/008.jpg" /></div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
</div>
<!-- Bullet Navigator Skin End -->
</div>
<div u="thumb">
<img src="holder.js/320x160">
<div class="title_back"></div>
<div class="title">
Motor
</div>
</div>
</div>
<div>
<div id="sliderh3_container" class="sliderh3" style="position: relative; top: 0px; left: 0px; width: 960px;
height: 400px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 960px; height: 400px;
overflow: hidden;">
<div><img u="image" src="../img/photography/004.jpg" /></div>
<div><img u="image" src="../img/photography/005.jpg" /></div>
<div><img u="image" src="../img/photography/006.jpg" /></div>
<div><img u="image" src="../img/photography/007.jpg" /></div>
<div><img u="image" src="../img/photography/008.jpg" /></div>
<div><img u="image" src="../img/photography/009.jpg" /></div>
<div><img u="image" src="../img/photography/010.jpg" /></div>
<div><img u="image" src="../img/photography/011.jpg" /></div>
<div><img u="image" src="../img/photography/012.jpg" /></div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb03" style="position: absolute; bottom: 110px; right: 10px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:white; font-size:12px;"><NumberTemplate></NumberTemplate></div>
</div>
<!-- Bullet Navigator Skin End -->
</div>
<div u="thumb">
<img src="holder.js/320x160">
<div class="title_back"></div>
<div class="title">
Photography
</div>
</div>
</div>
</div>
<!-- ThumbnailNavigator Skin Begin -->
<div u="thumbnavigator" class="jssort12" style="cursor: default; position: absolute; width: 960px; height: 100px; left:0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<style>
/* jssor slider thumbnail Navigator Skin 12 css */
/*
.jssort12 .p (normal)
.jssort12 .p:hover (normal mouseover)
.jssort12 .pav (active)
.jssort12 .pav:hover (active mouseover)
.jssort12 .pdn (mousedown)
*/
.jssort12 .p img {
FILTER: alpha(opacity=55);
opacity: .55;
transition: opacity .6s;
-moz-transition: opacity .6s;
-webkit-transition: opacity .6s;
-o-transition: opacity .6s;
}
.jssort12 .pav img, .jssort12 .pav:hover img, .jssort12 .p:hover img {
FILTER: alpha(opacity=100);
opacity: 1;
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
}
.jssort12 .pav:hover img, .jssort12 .p:hover img {
FILTER: alpha(opacity=70);
opacity: .7;
}
.jssort12 .title, .jssort12 .title_back {
position: absolute;
top: 70px;
left: 0px;
width: 320px;
height: 30px;
line-height: 30px;
text-align: center;
color: #000;
font-size: 20px;
}
.jssort12 .title_back {
background-color: #fff;
filter: alpha(opacity=50);
opacity: .5;
}
.jssort12 .pav:hover .title_back, .jssort12 .p:hover .title_back {
filter: alpha(opacity=40);
opacity: .4;
}
.jssort12 .pav .title_back {
background-color: #000;
filter: alpha(opacity=50);
opacity: .5;
}
.jssort12 .pav .title {
color: #fff;
}
</style>
<div u="slides" style="cursor: move;">
<div u="prototype" class=p style="POSITION: absolute; WIDTH: 320px; HEIGHT: 100px; TOP: 0; LEFT: 0;">
<thumbnailtemplate style="WIDTH: 320px; HEIGHT: 100px; border: none; position: absolute; TOP: 0; LEFT: 0; "></thumbnailtemplate>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->
<a style="display: none" href="http://www.jssor.com">slideshow html</a>
</div>
<!-- Jssor Slider End --></body>
<script src="holder.js"></script>
</html>
Ok so:
- Modified the width from 600px to 960px and height from 300px to 400px.
- Modified thumbnail sizes from 200x100 to 320x160 (320 because they fit in 960 and 160 to respect the ratio).
- Had to modify the <div u="navigator">bottom to 110px instead of 10px.
- Used holder.jsto replace thumbnail images (place the holder.js file at the same level of your htlm file if you want to test using this code).
好的： - 将宽度从 600px 修改为 960px，将高度从 300px 修改为 400px。- 将缩略图大小从 200x100 修改为 320x160（320，因为它们适合 960 和 160 以尊重比例）。- 不得不将<div u="navigator">底部修改为 110px 而不是 10px。- 使用holder.js替换缩略图（如果要使用此代码进行测试，请将 holder.js 文件放在 htlm 文件的同一级别）。
Use a diff tool to check the difference between this code and the content of the original nested-slider.source.html file.
使用 diff 工具检查此代码与原始 Nested-slider.source.html 文件的内容之间的差异。
Hope this helps!
希望这可以帮助！
回答by Zishan Mohsin
You can change the width by changing the min body width in scalesSlider(), which is written in the script tag in your html page:
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 960));
您可以通过更改 中的最小主体宽度来更改宽度scalesSlider()，该宽度写在 html 页面的脚本标记中：
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 960));
回答by bob green
You need to edit the JavaScript file, not the CSS, as the width is an element.
您需要编辑 JavaScript 文件，而不是 CSS，因为宽度是一个元素。
Open the JavaScript jssor.slider.mini.jsand find (c.max(c.min(b,1081),300).
打开 JavaScriptjssor.slider.mini.js并找到(c.max(c.min(b,1081),300).
1081 is max-width and 300 is min-width.
1081 是最大宽度，300 是最小宽度。
This is what I did, and it worked fine.
这就是我所做的，并且效果很好。
