Integrating Jssor slider in HTML

Integrating Jssor slider is easy. You need to make sure you've defined the location of related js files and images properly and it'll work fine. To make the appearance of your HTML document good, make sure you have removed the css properties to the external css file and the js script to a new js file and linked it properly. Here, I'm going to show you one of the demo.

JS Files

	<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
	<!-- use jssor.slider.mini.js (40KB) instead for release -->
	<!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
	<script type="text/javascript" src="../js/jssor.js"></script>
	<script type="text/javascript" src="../js/jssor.slider.js"></script>  

First of all, get the jquery-1.9.1.min.js file on your new website's js folder and relocate it.

Second, the comment says jquery.slider.mini.js works in place of two files i.e.jssor.js and jssor.slider.js. So, copy .mini file to your root js folder and specify it's link rather than copying two files.

Now, your html code will look like this.

	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/jssor.slider.mini.js"></script>  

Slider Script

Remove the entire code that fall within this script tag into a new file inside your root js folder and give it a name.

	<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
			$AutoPlayInterval: 4000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
			$PauseOnHover: 1,                                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

			$ArrowKeyNavigation: true,                    //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
			$SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
			$MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
			//$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
			//$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
			$SlideSpacing: 0,                           //[Optional] Space between each slide in pixels, default value is 0
			$DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
			$ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
			$UISearchMode: 1,                                   //[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).
			$PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
			$DragOrientation: 1,                                //[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 $DisplayPieces is greater than 1, or parking position is not 0)

			$ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
			$Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
			$ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
			$AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
			$Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
		},

		$ThumbnailNavigatorOptions: {
			$Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
			$ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

			$ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
			$AutoCenter: 0,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
			$Lanes: 1,                                      //[Optional] Specify lanes to arrange thumbnails, 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
			$DisplayPieces: 9,                              //[Optional] Number of pieces to display, default value is 1
			$ParkingPosition: 260,                          //[Optional] The offset position to park thumbnail
			$Orientation: 1,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
			$DisableDrag: false                            //[Optional] Disable drag or not, default value is false
		}
	};

	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 resizes
	function ScaleSlider() {
		var bodyWidth = document.body.clientWidth;
		if (bodyWidth)
		jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 980));
		else
		window.setTimeout(ScaleSlider, 30);
	}
	ScaleSlider();

	$(window).bind("load", ScaleSlider);
	$(window).bind("resize", ScaleSlider);
	$(window).bind("orientationchange", ScaleSlider);
	//responsive code end
});
</script>  

Now, write the newly created js file's source inside that empty script tag as shown below.

	<script src="js/myscript.js"></script>  

Images

Copy the images to your root folder and rectify the image sources or change the images according to your need. There's one more image in the css section that is the navigation arrow. Don't foget to relocate it too. Remove all the links to jssor's webpage that you can see on your <a> tags wrapping the images as you won't need them.

	<img src="../img/major/s2.png">
	to
	<img src="images/major/s2.png">            

Now, your slider should look fine.

Change the texts and images according your need but if you need to change the size of the slider container don't try it from html file. It can mess up everything. Go to the script file you've just created and see the section sliderwidth and make changes there.

	function ScaleSlider() {
		var bodyWidth = document.body.clientWidth;
		if (bodyWidth)
		jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 980));
		else
		window.setTimeout(ScaleSlider, 30);
	}
	ScaleSlider();  

Finally, your HTML code will look nice and the webpage too. Enjoy!!!

Download Jssor Slider zip file from here.

---

0 Like 0 Dislike 0 Comment Share Tweet