pgwslideshow-jquery-based picture Carousel plugin

0 Pgwslideshow Introduction

Pgwslideshow is a jquery-based image carousel plug-in, the basic layout is divided into the upper and lower structure, the upper part of the large-format carousel area, the user can customize the rotation of the picture carousel time, you can also click the left and right direction button to achieve picture switching, below for all the pictures to be carousel display, You can quickly switch pictures by clicking the thumbnail directly.

Pgwslideshow mainly has the following characteristics:

• Responsive design with a good degree of experience
• Support for desktop and mobile devices
• Compact and vigorous, less than 4KB of compressed files
• You can customize or directly modify the basic CSS style to give you the desired carousel plugin Beauty

Pgwslideshow Core Files:

• Pgwslideshow.css/pgwslideshow.min.css the default style file
• PGWSLIDESHOW_LIGHT.CSS/PGWSLIDESHOW_LIGHT.MIN.CSS Light System Style file
• Pgwslideshow.js/pgwslideshow.min.js js File

Intuitive experience

1 Pgwslideshow using 1.0 to add related file references

Since Pgwslideshow relies on jquery, a basic pgwslideshow use needs to add the following references to the head of your HTML page

<Linkhref= "~/content/plugins/pgwslideshow/pgwslideshow.min.css"type= "Text/css"rel= "stylesheet" /><Scriptsrc= "~/content/js/jquery-2.1.4.min.js"></Script><Scriptsrc= "~/content/plugins/pgwslideshow/pgwslideshow.min.js"type= "Text/javascript"></Script>

Effect of referencing default style Pgwslideshow.min.css

The effect of referencing the light-colored style pgwslideshow_light.min.css

1.1 Defining the HTML element structure

Pgwslideshow uses UL elements, each Li tag in the UL element identifies a carousel image

<!--Define UL whose class is specified as "Pgwslideshow" -    <ulclass= "Pgwslideshow">        <!--src: Identifies the path to the carousel picture -        <!--alt: Identifies the title of the carousel picture -        <!--data-description: A data description that identifies the carousel image, shown below the title -        <!--data-large-src: Identifies the path to the larger image of the carousel image, if not set, by default the image path with SRC -        <Li><imgsrc= "San-francisco.jpg"alt= "San Francisco, USA"data-description= "Golden Gate Bridge"></Li>        <Li><imgsrc= "Rio.jpg"alt= "Rio de Janeiro, Brazil"></Li>        <Li><imgsrc= "London_mini.jpg"alt=""data-large-src= "London.jpg"></Li>        <Li><imgsrc= "New-york.jpg"alt=""></Li>        <Li><imgsrc= "New-delhi.jpg"alt=""></Li>        <Li><imgsrc= "Paris.jpg"alt=""></Li>        <Li><imgsrc= "Sydney.jpg"alt=""></Li>        <Li><imgsrc= "Tokyo.jpg"alt=""></Li>        <Li><imgsrc= "Honk-kong.jpg"alt=""></Li>        <Li><imgsrc= "Dakar.jpg"alt=""></Li>        <Li><imgsrc= "Toronto.jpg"alt=""></Li>        <Li>            <!--Here you can wrap img with a tag, give the Carousel picture plus the super-chain you want -            <ahref= "Http://www.cnblogs.com/fonour"Target= "_blank">                 <imgsrc= "Monaco.jpg"alt= "Monaco">            </a>        </Li>    </ul>

1.2 Use of plugins

Pgwslideshow is very simple to use, just call the Pgwslideshow () method via the UL element.

$ (document). Ready (function () {        $ ('. Pgwslideshow '). Pgwslideshow ();});

Method call, we can also do some configuration as needed

varoption ={mainclassname:' Pgwslideshow ',//Use your custom CSS style to show the carousel diagramTransitionEffect: ' Sliding ',//animated rotation with two options sliding (sliding effect), fading (fade effect)Autoslide:false,//Allow Carousel to be automatically carousel by time intervalBeforeslide:false,//The function Type property, in which the callback functions before each switch of the carousel diagram. such as "function (ID) {Console.log (' before switchover, current ID ' + ID ');}"Afterslide:false,//The function Type property, after each switch in the carousel graph, is a callback. such as "function (ID) {Console.log (' after switchover, current ID ' + ID ');}"Displaylist:true,//whether to display thumbnails as a listDisplaycontrols:true,//whether to display the forward, backward page buttons. Touchcontrols:true,//whether to support mobile device touch paging OperationMaxHeight:NULL,//set the maximum height of the carousel plug-in, directly write the value, do not need to take PX unitsTRANSITIONDURATION:500,//Picture Auto-carousel, picture switching time, unit millisecondsintervalduration:3000//The interval in milliseconds before the next picture is displayed, which requires Autoslide to true    }; $('. Pgwslideshow '). Pgwslideshow (option);

1.3 Some common JS methods

varPgwslideshow = $ ('. Pgwslideshow '). Pgwslideshow ();//get the Carousel plug-in ObjectPgwslideshow.startslide ();//Control Carousel Plug-in start carouselPgwslideshow.stopslide ();//Control Carousel Plug-in Stop carouselPgwslideshow.getcurrentslide ();//gets the number of the current carousel picturePgwslideshow.getslidecount ();//gets the number of pictures currently included in the Carousel pluginPgwslideshow.displayslide (3);//display a carousel picture of a specified ordinal by a value in a parameterPgwslideshow.nextslide ();//Show Next PicturePgwslideshow.previousslide ();//Show Previous picturePgwslideshow.destroy ();//destroys the Carousel diagram object. Can be controlled by an optional parameter, if the passed parameter is true, then the container is simply hidden.Pgwslideshow.reload ({//Reload the Carousel diagram plug-in using the new configuration parametersTransitionEffect: ' Fading ', Adaptiveduration:4000              });

1.4 Loading Service-side data

Loading the server side data is also very simple, just based on the data returned by the server, dynamically construct the Li tag, then add the UL element, then call Pgwslideshow () on the line.

<class= "Pgwslideshow"  ID= "PictureBox"></ ul >

$ (function  () {    var/// Here is generally used Ajax to accept the server return data    var html = "" function ( I, item) {        + = "<li>      Attachmenturl + "' data-large-src= '" + Item. Attachmenturl + "' alt= '" + Item. AttachmentName + "' data-description= '" + Item. AttachmentName + "' ></li>";    });    $ ("#pictureBox"). HTML (HTML);    $ ('. Pgwslideshow '). Pgwslideshow ();});

pgwslideshow-jquery-based picture Carousel plugin