Mobile web's most concise sliding effect swipe JS (for beginners)

Recently, to do a mobile Web project, the front-end back end of their own people to engage. As has been done before the development of the backend, did not involve the development of the front-end, is not to start, but also have to get, as a result, the first w3school on the front-end related HTML, JS, CSS are previewed, and then in the imitation of other people's site to try to achieve.

Although a lot of people are the front desk is very simple, nothing to do (at least as I do the backstage of those colleagues think so), but really started to get up, or some difficult, to do beautiful and easy to use, but also to study the why.

Here's how I'm going to implement a slide (picture, text, etc.) on the phone. I first downloaded someone else's page, then according to its "module" in the page to cut, separate each module to lift out, do: (1) understand the layout of the page (at the beginning, in doubt, before, background development of the thinking mode is not the same, because at the beginning, Look at the pages of those HTML, CSS, JS really dizzy, and feel the code is also very messy (2) familiar with HTML tags and css, JS usage; (This takes a certain amount of time to familiarize yourself with the characteristics and usage of each tag).

This example, is that I extracted, the original redundant CSS and so on to delete, just retain the most concise sliding effect of the part, due to just contact, in the description and understanding of the wrong place, but also please correct:

First, briefly said Swipe.js (see: http://swipejs.com/)

The reason to use this JS, mainly is:

(1) I search in Baidu "page sliding" and other keywords, it appeared to the elderly.

(2) It is also used when I download the slide page of others.

Second, how to use

Swipe is a pure JavaScript, which is useless to any other JS frame (due to the time problem, the contents of the inside is not very fine research, later have time, and then to learn), to achieve the moving end of the sliding, must have the elements:

(1) HTML, which of course needless to say

(2) CSS, you need a certain style of CSS. Swipe inside will look for key tag style, according to the style to reality

(3) JS, which has its own definition and implementation of the JS function

The following is a description of the 3 blocks above, respectively:

(1) HTML. The necessary HTML is:

<div id= "Slider" class= "swipe" style= "visibility:visible"; >
	<div class= "Swipe-wrap" >
		<figure>
			<div>
				
			</div>
		</figure>
		<figure>
			<div>
				
			</div>			
		</figure>
	</div>
</div >

The ID of the outermost div of "1" is custom, which is required to be passed into the swipe

"2" the outermost div of the class= "swipe" and the second layer of Div class= "Swipe-wrap" is written dead, swipe will look up the two styles and do the appropriate processing

The figure of the third layer of "3" is the unit where we want to slide the element.

"4" After the content we want to slide, that is, in the unit figure

(2) CSS. The required CSS are:

<style>
Swipe {
	overflow:hidden;
	Visibility:hidden;
	Position:relative
}
. swipe-wrap {
	Overflow:hidden;
	Position:relative
}
. Swipe-wrap > Figure {
	float:left;
	width:100%;
	position:relative;
}
#slider {
	max-width:650px;/* set the maximum width * * *
	margin:0px auto;/* Center alignment/
}
Figure {
	margin:0;/* alignment, All around the width of 0, in the carousel, the whole picture to move/
}
</style>

"1" swipe, Swipe-wrap, Swipe-wrap > figure, these 3 are swipe must be used, and the style of the best also do not change (interested students can try to change, see what effect, quite fun:))

"2" #slider是我自己设定的, for the entire space centered

The "3" figure style is also set itself, but it is necessary to specify all the figure alignment, and can only be set to 0, otherwise there will be a confusion of position when sliding the picture. (why disorder, their own simple study, swipe sliding width of the pixel is based on the outermost div width, if the figure margin is not set to 0, and the interval, the sliding width will not be a whole piece of figure (there is a void between figure))

(3) JS. Must have JS:

<script src= "Js/swipe.js" ></script>
<script>
var slider =
  Swipe ( document.getElementById (' slider '), {
    auto:3000,
    continuous:true,
	callback:function (POS) {
	}
  });
</script>

This is called swipe, which some of the parameters are dispensable, according to their own needs to choose, a brief description of the next swipe interface parameters (JS inside is so called it.) ）：

Startslide Integer (default:0)-Start scrolling position
speed Integer (default:300)-Animation scrolling interval (seconds)
Auto Integer-Start automatic slide (in milliseconds Time between Slides
continuous Boolean (default:true)-Creates an infinite loop (when sliding to the end of all animations)
Disablescroll Boolean (default: FALSE)-whether to stop slide scrolling when scrolling scroll
stoppropagation Boolean (default:false)-stop event bubbling callback function
-callback function in slide run C15/>transitionend function-callback functions at the end of the animation run

Api:

Prev (): Prev Next
(): Next page
GetPos (): Get the index of the current page
getnumslides (): Get the number of all Items
Slide (index, duration): Sliding method

Then the code that you want to implement can be written in those callback functions (such as callback, etc.)

Third, other

To better display on mobile devices, in addition to the main configuration above, some additional support is required:

<meta name= "viewport" content= "Width=device-width, minimum-scale=1.0, maximum-scale=1.0" >

As for the above meaning, we can Baidu (program apes are using Google, but I can't, it can only be Baidu).

Well, swipe first introduced to this, the following is attached to my example source, which also added a nav. (swipe himself to download)

Because the first time again csdn write so many words, weak weak ask, I see very other articles inside the code has the number of lines, just in the editing time, everywhere to find the code line number of places, did not find, this does not support it.

<! DOCTYPE html>