Ich habe eine grundlegende Jssor Slider mit Miniaturansichten vertikal auf der linken Seite und Bilder auf der rechten Seite. Ich möchte Pfeile hinzufügen, um die Miniaturansichten nach oben und unten scrollen zu können. Können Sie mir bitte mitteilen, welchen Code ich hinzufügen soll und wo? Vielen Dank!Hinzufügen von Pfeilen zu Miniaturansichten von JSSOR Slider
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$Idle: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[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)
$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).
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Loop: 1, //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
$SpacingX: 3, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 3, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$Cols: 6, //[Optional] Number of pieces to display, default value is 1
$Align: 253, //[Optional] The offset position to park thumbnail,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 6 //[Optional] Steps to go for each navigation request, default value is 1
}
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 720));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<div id="slider1_container" style="position: relative; width: 720px;
height: 480px; 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: 720px; height: 480px;
overflow: hidden;">
<div>
<img u="image" src="../img/travel/01.jpg" />
<img u="thumb" src="../img/travel/thumb-01.jpg" />
</div>
<div>
<img u="image" src="../img/travel/02.jpg" />
<img u="thumb" src="../img/travel/thumb-02.jpg" />
</div>
<!--<div>
<img u="image" src="../img/travel/03.jpg" />
<img u="thumb" src="../img/travel/thumb-03.jpg" />
</div>
<div>
<img u="image" src="../img/travel/04.jpg" />
<img u="thumb" src="../img/travel/thumb-04.jpg" />
</div>
<div>
<img u="image" src="../img/travel/05.jpg" />
<img u="thumb" src="../img/travel/thumb-05.jpg" />
</div>
<div>
<img u="image" src="../img/travel/06.jpg" />
<img u="thumb" src="../img/travel/thumb-06.jpg" />
</div>
<div>
<img u="image" src="../img/travel/07.jpg" />
<img u="thumb" src="../img/travel/thumb-07.jpg" />
</div>
<div>
<img u="image" src="../img/travel/08.jpg" />
<img u="thumb" src="../img/travel/thumb-08.jpg" />
</div>
<div>
<img u="image" src="../img/travel/09.jpg" />
<img u="thumb" src="../img/travel/thumb-09.jpg" />
</div>
<div>
<img u="image" src="../img/travel/10.jpg" />
<img u="thumb" src="../img/travel/thumb-10.jpg" />
</div>
<div>
<img u="image" src="../img/travel/11.jpg" />
<img u="thumb" src="../img/travel/thumb-11.jpg" />
</div>
<div>
<img u="image" src="../img/travel/12.jpg" />
<img u="thumb" src="../img/travel/thumb-12.jpg" />
</div>
<div>
<img u="image" src="../img/travel/13.jpg" />
<img u="thumb" src="../img/travel/thumb-13.jpg" />
</div>
<div>
<img u="image" src="../img/travel/14.jpg" />
<img u="thumb" src="../img/travel/thumb-14.jpg" />
</div>-->
</div>
<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html -->
<style>
/* jssor slider thumbnail navigator skin 07 css */
/*
.jssort07 .p (normal)
.jssort07 .p:hover (normal mouseover)
.jssort07 .pav (active)
.jssort07 .pav:hover (active mouseover)
.jssort07 .pdn (mousedown)
*/
.jssort07 {
position: absolute;
/* size of thumbnail navigator container */
width: 800px;
height: 100px;
}
.jssort07 .p {
position: absolute;
top: 0;
left: 0;
width: 99px;
height: 66px;
}
.jssort07 .i {
position: absolute;
top: 0px;
left: 0px;
width: 99px;
height: 66px;
filter: alpha(opacity=80);
opacity: .8;
}
.jssort07 .p:hover .i, .jssort07 .pav .i {
filter: alpha(opacity=100);
opacity: 1;
}
.jssort07 .o {
position: absolute;
top: 0px;
left: 0px;
width: 97px;
height: 64px;
border: 1px solid #000;
box-sizing: content-box;
transition: border-color .6s;
-moz-transition: border-color .6s;
-webkit-transition: border-color .6s;
-o-transition: border-color .6s;
}
.jssort07 .pav .o {
border-color: #0099ff;
}
.jssort07 .p:hover .o {
border-color: #fff;
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
}
.jssort07 .p.pdn .o {
border-color: #0099ff;
}
* html .jssort07 .o {
/* ie quirks mode adjust */
width /**/: 99px;
height /**/: 66px;
}
</style>
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="jssort07" style="width: 720px; height: 100px; left: 0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: default;">
<div u="prototype" class="p">
<div u="thumbnailtemplate" class="i"></div>
<div class="o"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<style>
/* jssor slider arrow navigator skin 11 css */
/*
.jssora11l (normal)
.jssora11r (normal)
.jssora11l:hover (normal mouseover)
.jssora11r:hover (normal mouseover)
.jssora11l.jssora11ldn (mousedown)
.jssora11r.jssora11rdn (mousedown)
*/
.jssora11l, .jssora11r {
display: block;
position: absolute;
/* size of arrow element */
width: 37px;
height: 37px;
cursor: pointer;
background: url(../img/a11.png) no-repeat;
overflow: hidden;
}
.jssora11l {
background-position: -11px -41px;
}
.jssora11r {
background-position: -71px -41px;
}
.jssora11l:hover {
background-position: -131px -41px;
}
.jssora11r:hover {
background-position: -191px -41px;
}
.jssora11l.jssora11ldn {
background-position: -251px -41px;
}
.jssora11r.jssora11rdn {
background-position: -311px -41px;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
</div>
<!--#endregion Thumbnail Navigator Skin End -->
<!-- Trigger -->
</div>
<!-- Jssor Slider End -->