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 - Make Responsive Slider Tip - Make Best Performance Slider Tool - Slideshow Transition Viewer
We announce that Jssor Slider is one of the best performance sliders, it has been optimized in so many ways.
You may occasionally encounter performance issue. You may use slider in a page that runs lots of scripts. You may fall into old browser performance trap (especially zoom/rotate in IE 8).
If so, please check out following ways to improve performance of your slider. And suggestions below are not only for Jssor Slider, but also for all other sliders.
Tip - Make Best Performance Slider
1. Set slide size to the exact size of your image
Set 'slides container' size to the exact size of your image.
e.g. 'style="width:600px; height:300px;"' See Reference - UI Definition
Or explicitly set '$SlideWidth/$SlideHeight' option.
e.g. { $SlideWidth: 600, $SlideHeight: 300 }  See Reference - Options
See also Tip - Arrange Layout & Adjust Size
                            
Ad
2. Customize thumbnail explicitly
If you use thumbnail navigator in your slider, Jssor Slider trait the whole slide as thumbnail by default. It is strongly recommended that customize your thumbnail explicitly as below.
<div>
    <!-- Any HTML Content Here -->
    <img u="thumb" src="thumbimage.jpg" />
</div>
3. Choose high performance slideshow transitions
If you enable slideshow of your slider, please choose high performance slideshow transitions. Given slideshow transition code, it may look like
{
    ...
    $Zoom: 1,
    $Rotate: 1,
    $Opacity: 2,
    $Cols: 8,
    $Rows: 4
    ...
}
You should know that, no '$Zoom' better performance, no '$Rotate' better performance, no '$Opacity' better performance, less '$Cols' better performance, less '$Rows' better formance.
Note that '$Cols' and '$Rows' would not affect so much if there is no '$Zoom'/'$Rotate'/'$Opacity'. Keep an eye on '$Zoom'/'$Rotate'/'$Opacity' then.
4. Choose high performance caption transitions
If you enable caption slider, please choose high performance caption transitions. Given caption transition code, it may look like
{
    ...
    $Zoom: 1,
    $Rotate: 1,
    $Opacity: 2
    ...
}
You should know that, no '$Zoom' better performance, no '$Rotate' better performance, no '$Opacity' better performance
5. Remove background image
There may be background image of your slider container. You may overlap your slider above other element which contains image, complex content or frequently refresh element.
You can try to move your slider away.
6. Prevent refreshing frequently
There may be element keep refreshing near by your slider, try to move it away.
7. Prevent long time loading
There may be iframe reference to other page, or ajax remote call and consumes long time loading. Try to speed up the load.