Develop Jssor Slider
1. Standard Format
<script src="jssor.slider.min.js"></script>
<script>
jssor_slider1_init = function (containerId) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div data-u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img data-u="image" src="image1.jpg" /></div>
<div><img data-u="image" src="image2.jpg" /></div>
</div>
<!-- Arrow Navigator Skin Begin -->
<!-- open 'skin\arrow-*.html', copy and paste arrow navigator skin here -->
<!-- Arrow Navigator Skin End -->
<!-- Trigger -->
<script>jssor_slider1_init('slider1_container');</script>
</div>
2. jQuery Format
<script src="jquery.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div data-u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img data-u="image" src="image1.jpg" /></div>
<div><img data-u="image" src="image2.jpg" /></div>
</div>
<!-- Arrow Navigator Skin Begin -->
<!-- open 'skin\arrow-*.html', copy and paste arrow navigator skin here -->
<!-- Arrow Navigator Skin End -->
</div>
Tip: adjust arrow navigator position
#1. Adjust arrow navigator position with css
<!-- Arrow Navigator Skin Begin -->
...
<!-- Arrow Left -->
<div data-u="arrowleft" class="jssora01l" style="top: 123px; left: 8px;"></div>
<!-- Arrow Right -->
<div data-u="arrowright" class="jssora01r" style="top: 123px; right: 8px;"></div>
...
<!-- Arrow Navigator Skin End -->
#2. In addition, you can use attribute to control scale ratio of size and position.
<div data-u="arrowleft" ...
data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<div data-u="arrowright" ...
data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<!--
data-autocenter: 1: horizontal, 2:vertical
data-scale:
1: scale size of element at the same ratio of slider
0: no scale
0.1-0.9: scale smarter to prevent from being scaling too small on mobile
device and too large on large screen computer
Default value is 1
data-scale-left:
1: scale left position of element at the same ratio of slider
0: no scale
0.1-0.9: scale smarter
Default value is 1
data-scale-right:
1: scale right position of element at the same ratio of slider
0: no scale
0.1-0.9: scale smarter
Default value is 1
-->