Responsiveslides.js is a lightweight, responsive jquery slide plug-in that shows pictures in the same container (tiny responsive slideshow jquery plugin). It supports almost all browsers, including IE6, and supports the maximum width attribute in IE6, but is not natively supported in other browsers. All you need to do is link jquery and crop the image to the same size.
- 1
Download the responsiveslides.js on GitHub as shown in.
- 2
Unzip the Responsiveslides.js-master.zip file, as shown in the project directory.
- 3
Create a new project directory, copy the RESPONSIVESLIDES.CSS, Responsiveslides.min.js, respectively, in the new CSS and JS folder.
- 4
Introducing Files
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src= "Responsiveslides.min.js" ></script>
- 5
Add HTML tags
<ul class= "Rslides" >
<li></li>
<li></li>
<li></li>
</ul>
Add CSS
. rslides {
position:relative;
List-style:none;
Overflow:hidden;
width:100%;
padding:0;
margin:0;
}
. rslides Li {
-webkit-backface-visibility:hidden;
Position:absolute;
Display:none;
width:100%;
left:0;
top:0;
}
. rslides Li:first-child {
position:relative;
Display:block;
Float:left;
}
. rslides img {
Display:block;
Height:auto;
Float:left;
width:100%;
border:0;
}
Invoke API
<script>
$ (function () {
$ (". Rslides"). Responsiveslides ();
});
</script>
API parameters:
$ (". Rslides"). Responsiveslides ({
Auto:true,//Boolean: Sets whether to play automatically, true or False
speed:500,//Integer: Animation duration, per millisecond
timeout:4000,//Integer: Time between pictures, per millisecond
Pager:false,//Boolean: Whether the page number is displayed, true or False
Nav:false,//Boolean: Whether to display the left and right navigation arrows (that is, upside down), true or False
Random:false,//Boolean: Random slide order, true or False
Pause:false,//Boolean: Pauses the mouse hover over the slide, true or False
Pausecontrols:true,//Boolean: Pause on the dashboard, true or False
Prevtext: "Previous",//String: The display text of the forward button
Nexttext: "Next",//String: The display text of the rollover button
MaxWidth: "",//Integer: Maximum width of the slide
Navcontainer: "",///Selector:where controls should be appended to, default was after the ' UL '
Manualcontrols: "",///Selector: declaring custom paging navigation
namespace: "Rslides",//String: Modify the default container name
Before:function () {},//function: Parameter before callback
After:function () {}//function: Parameter after callback
Browser support:
Internet Explorer 6,7,8,9
Firefox 3,6,8,11
Safari 5,5.1
Chrome 15,20
Opera 11,11.6
IOS Safari
Symbian 3 Webkit
Opera Mobile 10.1
Opera Mini for IOS
IE7, IE9 Mobile
Firefox Mobile
Android 2.3+
Kindle Browser
Characteristics:
1. Smaller file size (only 792 bytes by reduction and GZ compression)
2. Simple function (Responsiveslides.js only supports three modes: the picture automatically fades in and uses the page number label, or left and right to manually switch the picture. )
Demo.css
* {
margin:0;
padding:0;
}
HTML {
Background: #222 URL ("Images/bg.png") repeat;
}
Body {
_width:70%;
Color: #888;
font:14px/20px Helvetica, Arial, Sans-serif;
margin:20px Auto 0;
max-width:800px;
Text-align:center;
text-shadow:0 -2px 1px #000;
-webkit-font-smoothing:antialiased;
}
H1 {
font:40px/60px "Helvetica Neue", Helvetica, Arial, Sans-serif;
Color: #fff;
font-weight:200;
}
H2 {
font:16px/20px "Helvetica Neue", Helvetica, Arial, Sans-serif;
margin-bottom:40px;
}
#wrapper {
padding:20px;
}
P,h3,h4,pre {
Text-align:left;
max-width:540px;
margin:0 Auto 20px;
}
. rslides {
margin:0 Auto 40px;
}
#slider2,
#slider3 {
Box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
margin:0 Auto;
}
. rslides_tabs {
List-style:none;
padding:0;
Background:rgba (0,0,0,.25);
box-shadow:0 0 1px rgba (255,255,255,.3), inset 0 0 5px Rgba (0,0,0,1.0);
-moz-box-shadow:0 0 1px rgba (255,255,255,.3), inset 0 0 5px Rgba (0,0,0,1.0);
-webkit-box-shadow:0 0 1px rgba (255,255,255,.3), inset 0 0 5px Rgba (0,0,0,1.0);
font-size:18px;
List-style:none;
margin:0 Auto 50px;
max-width:540px;
padding:10px 0;
Text-align:center;
width:100%;
}
. rslides_tabs Li {
Display:inline;
Float:none;
margin-right:1px;
}
. rslides_tabs a {
Width:auto;
line-height:20px;
PADDING:9PX 20px;
Height:auto;
Background:transparent;
Display:inline;
}
. rslides_tabs Li:first-child {
margin-left:0;
}
. rslides_tabs. Rslides_here a {
Background:rgba (255,255,255,.1);
Color: #fff;
Font-weight:bold;
}
A
Color: #fff;
Text-decoration:none;
}
#download {
Background: #333;
Background:rgba (255,255,255,.1);
border:1px solid Rgba (255,255,255,.1);
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
Display:block;
font-size:20px;
Font-weight:bold;
margin:60px Auto;
max-width:500px;
padding:20px;
}
#download: hover {
Background:rgba (255,255,255,.15);
}
. footer {
font-size:11px;
}
/* Callback Example */
h3 {
font:20px/30px "Helvetica Neue", Helvetica, Arial, Sans-serif;
Text-align:center;
Color: #fff;
}
. events {
List-style:none;
}
. callbacks_container {
margin-bottom:50px;
position:relative;
Float:left;
width:100%;
}
. callbacks {
position:relative;
List-style:none;
Overflow:hidden;
width:100%;
padding:0;
margin:0;
}
. callbacks Li {
Position:absolute;
width:100%;
left:0;
top:0;
}
. callbacks img {
Display:block;
position:relative;
Z-index:1;
Height:auto;
width:100%;
border:0;
}
. Callbacks. Caption {
Display:block;
Position:absolute;
Z-index:2;
font-size:20px;
Text-shadow:none;
Color: #fff;
Background: #000;
Background:rgba (0,0,0,. 8);
left:0;
right:0;
bottom:0;
padding:10px 20px;
margin:0;
Max-width:none;
}
. callbacks_nav {
Position:absolute;
-webkit-tap-highlight-color:rgba (0,0,0,0);
top:52%;
left:0;
opacity:0.7;
Z-index:3;
Text-indent: -9999px;
Overflow:hidden;
Text-decoration:none;
height:61px;
width:38px;
Background:transparent URL ("Themes/themes.gif") no-repeat left top;
Margin-top: -45px;
}
. callbacks_nav:active {
opacity:1.0;
}
. callbacks_nav.next {
Left:auto;
Background-position:right top;
right:0;
}
#slider3-pager a {
Display:inline-block;
}
#slider3-pager img {
Float:left;
}
#slider3-pager. Rslides_here a {
Background:transparent;
box-shadow:0 0 0 2px #666;
}
#slider3-pager a {
padding:0;
}
@media screen and (max-width:600px) {
H1 {
font:24px/50px "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
. callbacks_nav {
top:47%;
}
}
Case 1
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>responsiveslides.js · Responsive JQuery slideshow</title>
<meta name= "viewport" content= "width=device-width,initial-scale=1" >
<link rel= "stylesheet" href= ". /responsiveslides.css ">
<link rel= "stylesheet" href= "Demo.css" >
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src= ". /responsiveslides.min.js "></script>
<script>
You can also use "$ (window)." Load (function () {"
$ (function () {
Slideshow 1
$ ("#slider1"). Responsiveslides ({
maxwidth:800,
speed:800
});
});
</script>
<body>
<div id= "wrapper" >
<!--Slideshow 1--
<ul id= "Slider1" >
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Case 1 runs the effect as shown in.
Case 2
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>responsiveslides.js · Responsive JQuery slideshow</title>
<meta name= "viewport" content= "width=device-width,initial-scale=1" >
<link rel= "stylesheet" href= ". /responsiveslides.css ">
<link rel= "stylesheet" href= "Demo.css" >
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src= ". /responsiveslides.min.js "></script>
<script>
You can also use "$ (window)." Load (function () {"
$ (function () {
Slideshow 2
$ ("#slider2"). Responsiveslides ({
Auto:false,
Pager:true,
SPEED:300,
maxwidth:540
});
});
</script>
<body>
<div id= "wrapper" >
<!--Slideshow 2--
<ul id= "Slider2" >
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
</ul>
</div>
</body>
Case 2, run as shown in.
END