Currently, I am working on implementing a full-width slider with arrow navigators, bullet navigators, and captions using the Jssor plugin. Rather than copying and pasting example code, I decided to tackle this project independently with just a little guidance from the sample provided. The slider functions properly; however, I encountered an issue when attempting to add the bullet navigator as it fails to appear.
Below is the HTML snippet:
<div id="slider1_container">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1903px; height: 550px;">
<div><img u="image" style="width: 100%" src="img/schaedel_2.jpg" /></div>
<div><img u="image" style="width: 100%" src="img/motiv1.jpg" /></div>
</div>
</div>
<!-- Bullet Navigator Container -->
<div u="navigator" class="jssorb13" style="position: absolute; bottom: 16px; right: 6px;">
<!-- Bullet Navigator Item Prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 21px; HEIGHT: 21px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
CSS Styles:
#slider1_container {
position: relative;
top: 95px;
width: 1903px;
left: 0px;
height: 550px;
}
.jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
background: url(../img/b13.png) no-repeat;
overflow:hidden;
cursor: pointer;
}
.jssorb13 div {
background-position: -5px -5px;
}
.jssorb13 div:hover, .jssorb13 .av:hover {
background-position: -35px -5px;
}
.jssorb13 .av {
background-position: -65px -5px;
}
.jssorb13 .dn, .jssorb13 .dn:hover {
background-position: -95px -5px;
}
JQuery/JS (Includes code for other elements on the page):
$(document).ready(function () {
var options = {
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 1, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 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: 10, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
// Call the ScaleSlider function after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
$("ul").animate({marginRight: '10%'}, 100);
$("#logo").delay(600).hide().fadeIn(600);
$(".menu img").delay(200).hide().fadeIn(600);
});