i have created this my slider with jssor slider on full desktop width and on mobile view its working fine but when i minimizing it below 1200px its adding the scroll bar to the window and all the content overflow to the player body. and as the width of the player is defined into the jquery code can i customize it according to media queries ?
我正在创建带有bootstrap的网站，这个jssor播放器caraousel放在bootstrap nav-tabs中。 请告诉我们如何调整播放器以使其响应浏览器调整大小， 我已经写了所有播放器的html css和jquery，请告诉我在哪里修复它。
<html>
<head>
<style>
.shop-prod-block {margin: 30px 0 ;}
.shop-prod-block .product-gallery-item {padding: 15px 0; text-align: center; border: solid 1px black; }
.shop-prod-block .product-gallery-item .product-price ul li.addToCart{padding: 4px; background: rgb(102,102,102); border-radius: 2px; width: 90%; text-align: center; margin: auto;}
.shop-prod-block .product-gallery-item .product-price ul li.addToCart.addToCart a{color: white}
.shop-prod-block .product-gallery-item .product-title{height: 30px;}
.shop-prod-block .product-gallery-item .product-price{padding-right: 20px}
.shop-prod-block .product-gallery-item .selling-product{padding: 5px 0; border-right: solid 1px gray; height: 120px; margin-top: 10px;}
.shop-prod-block .product-gallery-item .product-price .strikethrough-price{color: orange}
.shop-prod-block .product-gallery-item .product-price ul li{display: inline-block; list-style: none; padding-left: 5px; }
.shop-prod-block .product-gallery-item .product-price ul li del{font-size: 12px; }
.cust-nav-tabs{background: rgb(25,58,89); font-size: 16px; font-weight: normal; position: relative; height: 44px;}
.cust-tab-content{background: white; min-height: 100px;}
</style>
</head>
<body>
<div id="slider2_container"
style="position: relative; top: 0px; left: 0px; width: 809px; height: 250px; 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: 809px; height: 250px; overflow: hidden;">
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod1.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Cosco Football</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod2.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">1200.00</li>
<li class="strikethrough-price"><del><i class="fa fa-inr"></i>1500</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Yonex B Shoes Shb 01 Mx Badminton</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod3.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">7720.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>9650
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
<div class="product-gallery-item">
<div class="product-title">Sports Shoe</div>
<div class="selling-product">
<div class="product-image">
<img alt="" src="images/products/prod4.png">
</div>
</div>
<div class="product-price">
<ul>
<li class="currency"><i class="fa fa-inr"></i></li>
<li class="price-gallery-product">680.00</li>
<li class="strikethrough-price"><del>
<i class="fa fa-inr"></i>750
</del></li>
</ul>
<ul>
<li class="addToCart"><a href="#"><i class="fa fa-shopping-cart"> | </i>Add
to Cart</a></li>
</ul>
</div>
</div>
</div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora03l" style="width: 25px; height: 55px; top: 123px; left: 0;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora03r" style="width: 25px; height: 55px; top: 123px; right: 0">
</span>
</div>
<!-- javascript for the jssor slider and support file -->
<script type="text/javascript"
src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"
src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jssor.js"></script>
<script type="text/javascript" src="js/jssor.slider.js"></script>
<script>
jssor_slider1_starter = function (containerId) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 4, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$AutoPlayInterval: 4000, //[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, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 160, //[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: 218.75, //[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: 4, //[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: 1, //[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: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 1, //[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)
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 2, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 4 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
//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, 875));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
}
//if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
// $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//}
////responsive code end
};
</script>
<script>
jssor_slider1_starter('slider2_container');
</script>
</body>
</html>
答案 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, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
//if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
// $(window).bind("orientationchange", ScaleSlider);
//}
//responsive code end