tutorial on using Css+jquery slides

Slides– is a simple, easy-to-customize and stylized, jquery slideshow plugin.

Slides offers many options such as fade or slide transitions, image fade, image pre-Press, auto-component pages, looping, auto-play customizations, and more.

With the slides plugin, you can play the slideshow randomly and set that set of slides you want to start. It comes with a full description and examples.

Directory

1. Basic HTML structure
2. Basic CSS Code
3. Basic initialization of JavaScript code
4. Official document explaining version 119
1. Preloadboolean
3. Preloadimagestring
4. Containerstring
5. Generatenextprevboolean
6. Nextstring
7. Prevstring
8. Paginationboolean
9. Generatepaginationboolean
10. Paginationclassstring
11. Currentclassstring

Slides– is a simple, easy-to-customize and stylized, jquery slideshow plugin.

Slides offers many options such as fade or slide transitions, image fade, image pre-Press, auto-component pages, looping, auto-play customizations, and more.

With the slides plugin, you can play the slideshow randomly and set that set of slides you want to start. It comes with a full description and examples.

Demo Address: http://slidesjs.com/

Website address: http://slidesjs.com/

: Http://slidesjs.com/downloads/slides.zip

Basic HTML structure [HTML]View PlainCopy

2. <div id="slides">
4. <div class="Slides_container">
6. <div>
8. <H1>slide 1</H1>
10. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labor E et dolore magna Aliqua. </P>
12. </div>
14. <div>
16. <H1>slide 2</H1>
18. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore ET dolore magna Aliqua. </P>
20. </div>
22. <div>
24. <H1>slide 3</H1>
26. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore ET dolore magna Aliqua. </P>
28. </div>
30. <div>
32. <H1>slide 4</H1>
34. <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labor E et dolore magna Aliqua. </P>
36. </div>
38. </div>
40. </div>

Basic CSS Code [CSS]View PlainCopy

2. <style type="text/css" media="screen" >
4. . slides_container {
6. width:470px;
8. height:170px;
10. }
12. . Slides_container Div {
14. width:470px;
16. height:170px;
18. display:block;
20. }
22. </style>

Basic initialization of JavaScript code [JavaScript]View PlainCopy

1. <script>
2. $ (function () {
3. $ ("#slides"). Slides ();
4. });
5. </script>

Official document Explanation (version 1.1.9) preload (Boolean) when the parameter is set to trueIn the process of loading the photo in the album Show loading Pictures, set to false, it means do not show loading pictures [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Preload: true
4. });
5. });

The default value is: falsePreloadimage (String) This property generally followed a preload (Boolean)Used together, the value inside the string indicates what needs to be displayed Loading PicturesOf Path Address [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Preload: true,
4. Preloadimage: '/img/loading.gif '
5. });
6. });

The default value is: "/img/loading.gif"Container (string) sets the top-level div where the picture layer is placed Style name [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Container: ' Slides_container '
4. });
5. });

The default value is: "Slides_container"Generatenextprev (Boolean) setting whether automatic generation prev NextButton [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Generatenextprev: True
4. });
5. });

The default value is: false  Next (string) auto-generated Next button style name [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Next: ' Next '
4. });
5. });

The default value is: "Next"

Prev (string) auto-generated Previous button style name [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Prev: ' prev '
4. });
5. });

The default value is: "Prev"

Pagination (Boolean) If you do not use pagination to display the picture you can set it to false, but not necessary, recommend not to do settings [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Pagination: true
4. });
5. });

Generatepagination (Boolean) setting whether automatic generation Paging navigation layer [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Generatepagination: True
4. });
5. });

The default value is: true

Paginationclass (String) setting Paging navigation layerOf Style name [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Paginationclass: ' pagination '
4. });
5. });

The default value is: "Pagination"

Currentclass (string) setting in the paging navigation layer Current Paging ItemOf Style name [JavaScript]View PlainCopy

1. $ (function () {
2. $ ("#slides"). Slides ({
3. Currentclass: ' current '
4. });
5. });

The default value is: "Current"

tutorial on using Css+jquery slides