Basic Usage (jQuery)
Basic Usage (No-jQuery)
Define Slides HTML Code
Slider with Loading Screen (jQuery)
Slider with Loading Screen (No-jQuery)
Slider with Bullet Navigator (jQuery)
Slider with Bullet Navigator (No-jQuery)
Slider with Arrow Navigator (jQuery)
Slider with Arrow Navigator (No-jQuery)
Slider with Thumbnail Navigator (jQuery)
Slider with Thumbnail Navigator (No-jQuery)
Slider with Slideshow (jQuery)
Slider with Slideshow (No-jQuery)
Slider with Fixed/Static Element (e.g. QR code)
Pass html Validation (against w3c standards)
Reference – Options
Reference – UI Definition
Reference – API
Tip – Arrange Layout & Adjust Size
Tip – Adjust Speed
Tip – Make Responsive Slider
Tool – Slideshow Transition Viewer
Basic Usage (No-jQuery)
Define Slides HTML Code
Slider with Loading Screen (jQuery)
Slider with Loading Screen (No-jQuery)
Slider with Bullet Navigator (jQuery)
Slider with Bullet Navigator (No-jQuery)
Slider with Arrow Navigator (jQuery)
Slider with Arrow Navigator (No-jQuery)
Slider with Thumbnail Navigator (jQuery)
Slider with Thumbnail Navigator (No-jQuery)
Slider with Slideshow (jQuery)
Slider with Slideshow (No-jQuery)
Slider with Fixed/Static Element (e.g. QR code)
Pass html Validation (against w3c standards)
Reference – Options
Reference – UI Definition
Reference – API
Tip – Arrange Layout & Adjust Size
Tip – Adjust Speed
Tip – Make Responsive Slider
Tool – Slideshow Transition Viewer
Jssor Slider comes with 360+ slideshow transitions, user can choose any of these to create his/her slider.
To get transition code, reference 360+ Slideshow Effects
To get transition code, reference 360+ Slideshow Effects
Slider with Slideshow (jQuery)
1. Javascript Code
<script src="jquery.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function ($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{ code1 },
{ code2 },
{ code3 }
];
var options = {
$AutoPlay: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
Ad
2. HTML code
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
</div>
Get Slider with Slideshow Example
Preview Slider with Slideshow Example
Download Jssor Slider, extract zip file and find ‘examples/slider-with-slideshow.html’.
Download Jssor Slider, extract zip file and find ‘examples/slider-with-slideshow.html’.
Reference