我正在创建一个带引导程序的网站，我正在尝试将Jssor附近的图像部分可见滑块集成到页面中。您可以在this链接中查看该页面。 特定滑块的问题是在页面加载时，只会加载第一张图片。然后，我必须单击滑块以加载其余图片。 不幸的是，我没有javascript知识，以便自己处理这个问题所以我真的希望有人可以帮助我。提前感谢大家的时间。
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Artic Design - Kingdom Tower Riyadh</title>
<link rel="icon" href="../../images/favicon.ico" />
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../../css/navbar.css">
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<link rel="stylesheet" type="text/css" href="../../css/carousel-custom-navigation-buttons.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- use jssor.slider.mini.js (40KB) instead for release -->
<!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="../../js/jssor-slider/jssor.js"></script>
<script type="text/javascript" src="../../js/jssor-slider/jssor.slider.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<style>
.bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center;}
.vertical-align-middle { position: relative; font-size: 11px; margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<![endif]-->
</head>
<body>
<!-- Navigation Start -->
<div class="navbar-wrapper navbar navbar-inverse navbar-static-top nav-top-height" role="navigation">
<nav>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs"><a class="navbar-brand text-center" href="../index.html"><p>ARTIC DESIGN</p></a></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="../../index.html">HOME</a></li>
<li><a href="../news.html">NEWS</a></li>
<li class="active"><a href="../projects.html">PROJECTS</a></li>
<li><a href="../creative-services.html">CREATIVE SERVICES</a></li>
<li><a href="../team.html">TEAM</a></li>
<li><a href="../contact.html">CONTACT US</a></li>
</ul>
</div>
</nav>
</div>
<!-- Navigation End -->
<!-- Main Body Start -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2 hidden-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title tmarg-twenty">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">Η φωτιστική μας προσέγγιση βασίστηκε στο να τονίσουμε τις τρεις ζώνες του κτηρίου καθλως και την οροφή του. Το υπόλοιπο σώμα του κτηρίου έχει έναν υποτυπώδη αλλά στοχευμένο φωτισμό ετσι ώστε τη νύχτα να “βυθίζεται” στο backround του ουρανού.</p>
<p class="project-crew">
<span class="project-crew-property">Lighting Designer:<span><br>
<span class="project-crew-value">George Tellos</span><br>
<span class="project-crew-property">Constructor:</span><br>
<span class="project-crew-value">Masic Holding</span><br>
<span class="project-crew-property">Location:</span><br>
<span class="project-crew-value">Jeddah KSA</span>
</p>
</section>
</div>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-9 col-lg-10 carousel-col">
<!-- Project Carousel -->
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: false,
$PauseOnHover: true, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideWidth: 600, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
$SlideSpacing: 0, //Space between each slide in pixels
$Cols: 2, //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: 100, //The offset position to park slide (this options applys only when slideshow disabled).
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow 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
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
else
window.setTimeout(ScaleSlider, 30);
};
ScaleSlider();
jssor_slider1.$Play();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- 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: 100%; overflow: hidden;">
<!-- Slides Container -->
<div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 100%; overflow: hidden;"> <!-- height: 1000px; -->
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" /></div>
</div>
<div id="arrow_container" class="bubble">
<!-- Arrow Left -->
<div class="vertical-align-middle">
<span u="arrowleft" class="jssoral" style="width: 40px; height: 50px; left: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Right -->
<div class="vertical-align-middle">
<span u="arrowright" class="jssorar" style="width: 40px; height: 50px; right: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Navigator Skin End -->
</div>
</div>
<!-- Jssor Slider End -->
</div>
<div class="col-xs-12 visible-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">Η φωτιστική μας προσέγγιση βασίστηκε στο να τονίσουμε τις τρεις ζώνες του κτηρίου καθλως και την οροφή του. Το υπόλοιπο σώμα του κτηρίου έχει έναν υποτυπώδη αλλά στοχευμένο φωτισμό ετσι ώστε τη νύχτα να “βυθίζεται” στο backround του ουρανού.</p>
<p class="project-crew">Lighting Designer: GEORGE TELLOS<br>Constructor: MASIC HOLDING<br>Location: JEDDAH KSA</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Main Body End -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../js/bootstrap.min.js"></script>
<script>-->
<!-- this script resizes the slider's height so it will cover all of the usable browser's height.
$(window).resize(function WinResize1()
{
var usable_height = $(window).height();
$('#slider1_container').height(usable_height-70);
$('#slider1_container-inside').height(usable_height-70);
//alert(usable_height);
})
$(window).resize();
</script>
<script>-->
<!-- this script resizes the bubble's height so it will be the same as the slider's height in order for the carousel's arrow to be succesfully vertical-aligned -->
$(window).resize(function WinResize1()
{
var carousel_height = $('#slider1_container').height();
$('#arrow_container').height(carousel_height);
//alert(carousel_height);
})
$(window).resize();
</script>
<script>
jssor_slider1_starter('slider1_container');
</script>
</body>
</html>
答案 0 :(得分：0)
请删除以下代码，这是没用的。
<script>
jssor_slider1_starter('slider1_container');
</script>
请指定slider1_container和slides容器的固定大小，请注意100%对于jssor滑块不正确。参见
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
<!-- Slides Container -->
<div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
答案 1 :(得分：0)
我找到了解决问题的满意方案。由于某种原因，这个解决方案不能在引导程序的xs屏幕上工作，所以我不得不在xs屏幕中使用传统的bootstrap轮播。 知道Jssor滑块应该以固定大小初始化，我们的想法是动态插入＆＃34;固定大小＆＃34;在每页加载的Jssor Slider上。请参阅下面的代码。 我没有javascript经验，所以它可能会成为最好的解决方案。就我而言，它是唯一的一个。 我真的希望Jssor能用它来释放他滑块的V2。 等待反馈。 再次感谢你所有的时间。
<!-- Main Body Start -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2 hidden-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title tmarg-twenty">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">On the roof of the highest and most impressive building of Saudi Arabia light sources were installed, supplied by the TIC Riyadh.</p>
<p class="project-crew">
<span class="project-crew-property">Lighting Designer:<span><br>
<span class="project-crew-value">George Tellos</span><br>
<span class="project-crew-property">Constructor:</span><br>
<span class="project-crew-value">Masic Holding</span><br>
<span class="project-crew-property">Location:</span><br>
<span class="project-crew-value">Jeddah KSA</span>
</p>
</section>
</div>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-9 hidden-lg carousel-col">
<div id="carousel-project" class="carousel slide" data-interval=3000 data-keyboard=true data-pause="hover" data-wrap=true>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-project" data-slide-to="0" class="active"></li>
<li data-target="#carousel-project" data-slide-to="1"></li>
<li data-target="#carousel-project" data-slide-to="2"></li>
</ol>
<!-- Wrapper Start: slider images and captions -->
<div class="carousel-inner">
<div class="item active">
<img src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" width="789" height="1080" alt=""/>
</div>
<div class="item">
<img src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" width="717" height="1080" alt=""/>
</div>
<div class="item">
<img src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" width="717" height="1080" alt=""/>
</div>
</div>
<!-- Wrapper End: slider images and the captions -->
<!-- Carousel Custom Controls Start -->
<a class="left carousel-control" href="#carousel-project" role="button" data-slide="prev">
<span u="arrowleft" class="jssoral" style="width: 55px; height: 55px; top: 50%; left: 8px;">
</span>
</a>
<a class="right carousel-control" href="#carousel-project" role="button" data-slide="next">
<span u="arrowright" class="jssorar" style="width: 55px; height: 55px; top: 50%; right: 8px">
</span>
</a>
<!-- Carousel Custom Controls End -->
<!-- Carousel End -->
</div>
</div>
<div class="col-lg-10 visible-lg carousel-col">
<!-- Project Carousel -->
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: 0,
$PauseOnHover: true, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideWidth: 600, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
$SlideSpacing: 0, //Space between each slide in pixels
$Cols: 2, //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: 100, //The offset position to park slide (this options applys only when slideshow disabled).
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow 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
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
function ScaleSlider() {
var usable_width = window.innerWidth;
var carousel_width = usable_width-(usable_width*0.33); //because of the left column
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, carousel_width));
else
window.setTimeout(ScaleSlider, 30);
};
ScaleSlider();
jssor_slider1.$Play();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- 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; overflow: hidden;">
<!-- Slides Container -->
<div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; overflow: hidden;"> <!-- height: 1000px; -->
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" /></div>
</div>
<div id="arrow_container" class="bubble">
<!-- Arrow Left -->
<div class="vertical-align-middle">
<span u="arrowleft" class="jssoral" style="width: 40px; height: 50px; left: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Right -->
<div class="vertical-align-middle">
<span u="arrowright" class="jssorar" style="width: 40px; height: 50px; right: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Navigator Skin End -->
</div>
</div>
<!-- Jssor Slider End -->
</div>
<div class="col-xs-12 visible-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">On the roof of the highest and most impressive building of Saudi Arabia light sources were installed, supplied by the TIC Riyadh.</p>
<p class="project-crew">Lighting Designer: GEORGE TELLOS<br>Constructor: MASIC HOLDING<br>Location: JEDDAH KSA</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Main Body End -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../js/bootstrap.min.js"></script>
<script>
$(window).resize(function WinResize1()
{
var usable_height = $(window).height();
var carousel_height = usable_height-55; //beacuse of the navbar
$('#slider1_container').height(carousel_height);
$('#slider1_container-inside').height(carousel_height);
var usable_width = window.innerWidth;
var carousel_width = usable_width-(usable_width*0.33); //because of the left column
$('#slider1_container').width(carousel_width);
$('#slider1_container-inside').width(carousel_width);
$('#arrow_container').height(carousel_height);
//alert(carousel_height);
//alert(carousel_width);
})
$(window).resize();
</script>