hwSlider-content sliding switching effect (3): jquery.hwSlide.js plug-in encapsulation

After the explanations in the first two parts, we roughly know the basic development ideas and techniques of content sliding switching. Now in the third part, we will optimize the code in the first two parts and encapsulate it into a jQuery plug-in: jquery.hwSlide.js. Developers can easily create various image carousel effects, focus image effects, and graphic and text mixed sliding effects.



View demo download source code

hwSlider has the following features:

Multiple parameter customization, Meet different project needs.

Supports touch and slide on mobile terminal.

Supports mixed arrangement of images and text, and supports various html elements.

Responsive adaptive screen size.

The same page supports multiple sliding switches.

Lightweight, the compressed version is less than 4KB.

Supports all modern browsers, supports ie8+.

HTML

First load the basic css style files required by hwSlider in the head of the page, as well as the jquery library file and hwSlider plug-in. Of course, I recommend putting the js file in Loads at the bottom of the page.

[code=html]
<link type="text/css"  rel="stylesheet" href="css/hwslider.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hwSlider.js"></script>

Then add the following HTML code to the body:

[code=html]
<p class="hwslider">
	<ul>
		<li><img src="images/s1.jpg" alt=""></li>
		<li><img src="images/s2.jpg" alt=""></li>
		<li>hwSlider.js</li>
	</ul>
</p>

Lay out the HTML structure according to the above code, each A li element contains a slider. The content of the slider can be pictures, text, or a combination of pictures and text, etc.

jQuery

Follow the jQuery plug-in development template. Interested students can read this article about the introduction of jQuery plug-in template: jQuery pop-up layer plug-in-hwLayer, I The code has been encapsulated into a jQuery plug-in: jquery.hwSlider.js. Please download the source code to view the specific code. Calling the Flexslider plug-in is very simple. Use the following code:

[code=js]
$(function() { 
    $(".hwslider").hwSlider(); 
});

Run the page to see the slider effect. Note that hwSlider uses the slider size of 600x320 by default. You can change the default slider initial size by setting options.

hwSlider option settings

hwSlider provides simple and practical option settings for developers to set according to their needs.

##autoPlay Whether to slide automatically, Boolean true/falsefalsedotShowWhether to display dot navigation, Boolean true/falsetrue##arrShow##touchWhether to support touch sliding, Boolean true/falsetrueCallback function, call this function after sliding a slider The above is the content of hwSlider-content sliding switching effect (3): jquery.hwSlide.js plug-in encapsulation. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!

Parameters	Description	Default value
height	The initial height, number, width and height of the slider are used to ensure adaptive scaling of the slider size.	320
start	Initial sliding position, which number to start sliding from, number	1
speed	Sliding speed, unit ms, number	600
interval	Slider sliding Interval time, unit ms, number	3000
Whether to display left and right arrow navigation, Boolean true/false	true
		##afterSlider

-->