#javascript #jquery #css #jssor
#javascript #jquery #css #jssor
Вопрос:
Супер запутался в том, как настроить ширину этого слайдера…
Я пробовал редактировать 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),
Я пробовал редактировать 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 действительно хорош в комментариях, но я уверен, что сейчас я не могу этого понять..
Как обычно .. любая помощь будет принята с благодарностью. Спасибо.
Кроме того, вот ссылка, чтобы посмотреть на это здесь:
http://phpbuilds.com/Jssor .Слайдер.FullPack/demos-jquery/nested-slider.source.html
Ответ №1:
Вы можете изменить ширину, изменив минимальную ширину тела в scalesSlider() , которая записана в теге script на вашей HTML-странице: jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 960));
Ответ №2:
Я полагаю, вы ищете эту строку:
<div id="sliderh1_container" class="sliderh1" style="position:
relative; top: 0px; left:0px; width: 600px; height: 300px;">
Редактировать
Вот один из примеров слайдера, который у меня есть на веб-сайте.
<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;">
...
Кроме того, я не уверен, почему у вас это дважды:
<!-- Slides Container -->
...
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: defau< 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>
Итак, хорошо:
— Изменена ширина с 600 пикселей до 960 пикселей и высота с 300 пикселей до 400 пикселей.
— Изменены размеры миниатюр с 200×100 до 320×160 (320, потому что они вписываются в 960 и 160, чтобы соблюдать соотношение).
— Пришлось изменить <div u="navigator"> нижнюю часть на 110 пикселей вместо 10 пикселей.
— Используется holder.js чтобы заменить уменьшенные изображения (поместите holder.js файл на том же уровне, что и ваш htlm-файл, если вы хотите протестировать с помощью этого кода).
Используйте инструмент diff, чтобы проверить разницу между этим кодом и содержимым оригинала nested-slider.source.html досье.
Надеюсь, это поможет!
Комментарии:
1. Это не сработало, на самом деле ничего не изменилось, когда я изменил ширину.
2. Вы изменили как div slider_container, так и div слайдов ? Кроме того, как я уже упоминал, я не уверен, почему у вас есть слайды div дважды, на слайдерах, которые я использую, у меня есть только один slider_container, а затем один контейнер слайдов внутри.
3. Да, если вы хотите взглянуть на это, вы можете здесь: phpbuilds.com/Jssor . Слайдер. Полный пакет / демо-версии-jquery / … …. Когда я увеличиваю ширину пикселя, это фактически уменьшает его. странно @jssor
4. Антуан прав. И вы тоже все делаете правильно. Одна вещь, которую нужно прояснить, если вы видите адаптивные коды, начинающиеся с ‘// responsive code begin’, вы увидите, что он всегда масштабирует слайдер до ширины 600. Итак, если вы установите ширину слайдера равной 900, но он масштабируется до 600, дочерние слайдеры будут выглядеть еще меньше.
5. Спасибо, что подключились @jssor, я попробую еще раз, но, похоже, это не работает.. я хочу сделать его размером 960 x 400.
Ответ №3:
Вам нужно отредактировать файл JavaScript, а не CSS, поскольку ширина является элементом.
Откройте JavaScript jssor.slider.mini.js и найдите (c.max(c.min(b,1081),300) .
1081 — это максимальная ширина, а 300 — минимальная ширина.
Это то, что я сделал, и это сработало нормально.