Cute Slider 在线文档 - 我爱模板网 www.5imoban.net

Created: 9/7/2012
envato@averta.net

At first we would like to thank you for purchasing our item. If you have any questions that are not mentioned in this document, please feel free to contact us.

A) Intro - top

Cute Slider is an advanced slider with awesome 3D & 2D transitions, captions and videos (Youtube and Vimeo) support which has been written with pure object oriented javascript. It has three levels fallback which means it can work in major browsers and devices.

Key Features:

Responsive
3D & 2D Effects
5 Ready to use templates
100+ Transitions
3 fallback levels
Cross browser and device friendly
Transition gallery included
Fully customizable
Hardware accelerated CSS3 3D Transitions in webkit browsers
Canvas support for 3D Transitions in non-webkit browsers
Javascript framework independent
SEO optimized
Smart resource loader
Option to use multiline caption for every slide with Different style (HTML, CSS supported)
Option to set a link for each slide
Thumbnails over navigation
Youtube and Vimeo videos support

B) 5 Seconds Startup - top

Step 1: Link required files

At first you need to put reqired files beside your page:
Go to "source/compressed" and copy all javascript files to "js/cute" directory beside your page.
Go to "source/assets" and copy "cute-theme" folder beside your page.
Go to "source/assets/style" and copy "slider-style.css" to "style" directory beside your page.
Then add following html to the <head> of your page.

					<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js" type="text/javascript" charset="utf-8"></script>
					<script src="js/cute/cute.slider.js" type="text/javascript" charset="utf-8"></script>
					<script src="js/cute/cute.transitions.all.js" type="text/javascript" charset="utf-8"></script>
					
					<link rel="stylesheet" href="style/slider-style.css" type="text/css" media="screen"  charset="utf-8"/>
					
					<script src="http//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js" type="text/javascript" charset="utf-8"></script>

Step 2: Add Slide Style

Add following css to the <head> of your page.

					<style>
						#my-cute-slider{
							position:relative;
						}
						
						#slider-wrapper{
							position:relative;
							min-width:300px;
							max-width:800px; 
							margin: 0 auto;
						}
					</style>

Step 3: Add Cute Slider Markup

Add following html to the <body> of your page:
In this code determines that the slide images are located in "images" and the thumbnail images are in "images/thumbs" beside your page.

					<div id="slider-wrapper">
						<div id="my-cute-slider" data-width="800" data-height="350" data-vpwidth="900" data-vpheight="400">
						    <ul data-type="slides">
						        <li data-delay="4" data-trans3d="tr28" data-trans2d="tr1">
						            <img src="images/1.jpg" data-thumb="images/thumbs/1.jpg  "/>
						        </li>
						        <li data-delay="4" data-trans3d="tr25" data-trans2d="tr1 ">
						            <img src="theme/blank.jpg" data-src="images/2.jpg" data-thumb="images/thumbs/2.jpg"/>
						        </li>
						        <li data-delay="4" data-trans3d="tr29" data-trans2d="tr1">
						            <img src="theme/blank.jpg" data-src="images/3.jpg" data-thumb="images/thumbs/3.jpg"/>
						        </li>
						    </ul>
						    <ul data-type="controls">         
						        <li data-type="circletimer"> </li>
						        <li data-type="next"> </li>
						        <li data-type="previous"> </li>
						        <li data-type="slidecontrol"> </li>
						        <li data-type="bartimer"> </li>             
						    </ul>
						    <div class="br-shadow"> </div>
						</div>
					</div>

Step 4: Setup the Slider

Add following js at the end of <body> in your page:

					<script>
						var myslider = new Cute.Slider();
						myslider.setup("my-cute-slider" , "slider-wrapper");
					</script>

C) Overview - top

Required Javascript files:

		<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cute/cute.slider.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cute/cute.transitions.all.js" type="text/javascript" charset="utf-8"></script>

Required CSS files:

		<link rel="stylesheet" href="css/slider-style.css" type="text/css" media="screen"  charset="utf-8"/>

Cute Slider Definition Markup:

				

		<div id="my-cute-slider" data-width="800" data-height="350" >
			<ul data-type="slides">
				<li data-delay="4" data-trans3d="tr28" data-trans2d="tr1">
					<img src="images/1.jpg" data-thumb="images/thumbs/1.jpg	"/>
					<p data-type="info">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
					</p>
				</li>
				<li data-delay="4" data-trans3d="tr25" data-trans2d="tr1 ">
					<img src="theme/blank.jpg" data-src="images/2.jpg" data-thumb="images/thumbs/2.jpg"/>
					<a data-type="video" href="http://player.vimeo.com/video/1084537" width="800" height="350" > </a>
				</li>
				<li data-delay="4" data-trans3d="tr29" data-trans2d="tr1">
					<img src="theme/blank.jpg" data-src="images/3.jpg" data-thumb="images/thumbs/3.jpg"/>
				</li>
				<li data-delay="4" data-trans3d="tr29" data-trans2d="tr1">
					<img src="theme/blank.jpg" data-src="images/4.jpg" data-thumb="images/thumbs/4.jpg"/>
					<p data-type="info" data-align="right">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
					</p>
					<a data-type="link" href="http://www.google.com" target="_blank" > </a>.
					<ul data-type="captions">
						<li class="caption1" data-effect="fade">
							Euismod tincidunt
						</li>
						<li class="caption2" data-delay="500" data-effect="slide">
							Accumsan et iusto odio dignissim qui
						</li>
					</ul>
				</li>
				<li data-delay="4" data-trans3d="tr45" data-trans2d="tr1">
					<img src="theme/blank.jpg" data-src="images/5.jpg" data-thumb="images/thumbs/5.jpg"/>
					<p data-type="info" data-align="left">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
					</p>
				</li>
			</ul>
			<ul data-type="controls">			
				<li data-type="captions"> </li>
				<li data-type="link"> </li>
				<li data-type="video"> </li>
				<li data-type="slideinfo"> </li>
				<li data-type="circletimer"> </li>
				<li data-type="next"> </li>
				<li data-type="previous"> </li>
				<li data-type="slidecontrol"> </li>
				<li data-type="bartimer"> </li>				
			</ul>
			<div class="br-shadow"> </div>
		</div>

Cute Javascript setup:

		<script>
			var myslider = new Cute.Slider();
			myslider.setup("my-cute-slider" , "slider-wrapper");
		</script>

D) JavaScript And CSS Files - top

To use the Cute slider you need to link following files into your page:

modernizr 2.0+ (recommended) or yepnope
cute.slider.js
cute.transitions.all.js
slider-style.css
respond.min.js

Example:

		<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cute/cute.slider.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cute/cute.transitions.all.js" type="text/javascript" charset="utf-8"></script>
			
		<link rel="stylesheet" href="css/slider-style.css" type="text/css" media="screen"  charset="utf-8"/>
		
		<script src="js/respond.min.js" type="text/javascript" charset="utf-8"></script>

You can download modernizr (recommended) from this link or yepnopejs from this.
"cute.slider.js" Is the main cute slider file (in source/compressed directory).
"cute.transitions.all.js" All of the slider transitions are added into this file (in source/compressed directory). If you'd like to create your own transition list you can use transition gallery.
"slider-style.css" This file contains Cute slider template. You can find it in "source/assets/style".
Cute slide template images are located in "source/assets/cute-theme" Tt's important to put this folder beside your page.
You can download respond.js form this link. It's important to import it after all of your css files.

IMPORTANT: You also need to copy following files (located in source/compressed directory) and put them in a same directory as "js/cute" beside your html file:

cute.canvas.module.js
cute.2d.module.js
cute.css3d.module.js

If you'd like to change directory of these files, you can change it in "source/src/rotator/tools/ModuleLoader.js" and rebuild js files.

E) Cute Slider Markup - top

The Cute slider markup is so clear and flexible. It starts with a single div element that determines slider location in your page dom structure. It contains two ul child elements, first ul element with data-type="slides" defines slider slides and the other one (data-type="controls") defines controls.

			
		<div id="my-cute-slider" data-width="800" data-height="350" data-usethumb="false" data-overpause='true' data-force="">
			<ul data-type="slides">
				
			</ul>
			<ul data-type="controls">			
							
			</ul>
		</div>

Slider Parameters:

id: Determines a unique name for slider
data-width: Slide width
data-height: Slide height
data-overpause[optional]: Indicates whether slideshow will pause on mouse over slides , default value "true"
data-force[optional]: With this parameter you can force slider to use specified method for rendering transitions. It can be one of these values:
- "2d" Determines 2d transitions
- "canvas" Determines canvas method for rendering 3D transitions [Note: It will not work in old browsers]
- "css3d" Determines CSS3 3D transform method for rendering 3D transitions [Note: It will not work in old browsers]

F) Adding slide - top

Each slide must be added as an li element into ul element which has data-type="slides" attribute.

			
		<ul data-type="slides">
			<li data-delay="4" data-trans3d="tr28" data-trans2d="tr1">
				<img src="images/1.jpg" data-thumb="images/thumbs/1.jpg"/>
			</li>
			<li data-delay="4" data-trans3d="tr25" data-trans2d="tr1 ">
				<img src="theme/blank.jpg" data-src="images/2.jpg" data-thumb="images/thumbs/2.jpg"/>
			</li>
		</ul>

Slide parameters:

data-delay: Determines how long slide will show in seconds
data-trans2d: Determines 2D transition(s)
data-trans3d: Determines 3D transition(s)

NOTE: For defining transition you only need to use transition number. You need to add "tr" before the transition number for example "tr43" (You can find all of transitions with sample preview in transition gallery).

NOTE: You can add multiple transitions for 2d or 3d slide transition, just use comma to seperate between transition names in sequence for example data-trans2d="tr1 , tr2". It will be randomly selected by slider.

G) Slide Contents - top

Each slide content element, must be added in slide li element.

		<li data-delay="4" data-trans3d="tr28" data-trans2d="tr1">
			<img src="images/1.jpg" data-thumb="images/thumbs/1.jpg"/>
			<p data-type="info">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			</p>
		</li>

Contents:

Slide image
Defines slide background image.
```
<img src="images/1.jpg" data-thumb="images/thumbs/1.jpg"/>
```
Parameters:
- data-src (src): Specifies the URL of slide image
- data-thumb: Specifies the URL of slide thumb
IMPORTANT: It's important to use "src" instead of data-src for first slide.
Slide info:
To specify information content over slide, add your desired html markup in a p element with data-type="info" attribute.
```
				<p data-type="info">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
				</p>
				
```
Parameters:
- data-align[optional]: Determines alignment of slide info container, default value is bottom.
  values: top , right , bottom , left

Captions:
For adding captions over slide, you need to create an ul element with data-type="captions" and put each captions in one li element.

				<ul data-type="captions">
					<li class="caption1" data-effect="fade">
						Lorem ipsum dolor sit amet.
					</li>
					<li class="caption2" data-delay="500" data-effect="slide">
						Ut wisi enim ad minim veniam.
					</li>
				</ul>

Parameters:

data-effect[optional]: Determines caption show effect, default value is fade.
values: fade , slide
data-delay[optional]: Determines how long delay befor showing caption in milliseconds.

CSS Styling:
You can set your own style for each caption by specifying class name to caption li element.

.br-captions .br-caption-content {
	background-color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding:8px;
}

	.br-captions .caption1 {
		top:230px;
		left:100px;
		position:absolute;
	}
	
	.br-captions .caption2 {
		top:20px;
		left:300px;
		position:absolute;
	}

Videos:
Adds youtube or vimeo video over slide.
```
					<a data-type="video" href="http://player.vimeo.com/video/1084537" > </a>
					
```
Note: its important to specify data-type="video" attribute to "a" element for defining it as a video.

Parameters:
- href: The URL of video (You can find video embed URL in it embed code)
CSS Styling:
You can set your own style by specifying class name to "a" element
Link:
Creates a link over slide.
```
					<a data-type="link" href="http://www.google.com" target="_blank" > </a>
```
Note: It's important to specify data-type="link" attribute to "a" element for defining this as an anchor.

H) Controls - top

Each control must be added as an li element into ul element that has data-type="controls" attribute.

			<ul data-type="controls">			
				<li data-type="captions"> </li>
				<li data-type="link"> </li>
				<li data-type="video"> </li>
				<li data-type="slideinfo"> </li>
				<li data-type="circletimer"> </li>
				<li data-type="next"> </li>
				<li data-type="previous"> </li>
				<li data-type="slidecontrol"> </li>
				<li data-type="bartimer"> </li>				
			</ul>

Controls:

Captions
It's required if you want to use captions in your slider.
```
<li data-type="captions"> </li>
```
CSS Styling:
You can set custom class name to its li element. Default class name is "br-captions".
But it's recommended to use custom class name in slide content captions.
Link
It's required if you want to use hyperlink over slide
```
<li data-type="link"> </li>
```
Video
Required if you want to use Youtube or Vimeo videos
```
<li data-type="video"> </li>
```

Slide Info
Required if you want to add html content over slide

<li data-type="slideinfo"> </li>

CSS Styling:
You can set custom class name to its li element. Default class name is "br-slideinfo".

						.br-slideinfo .br-infocontent{
							background: url("../theme/info-pat.png");
							padding: 10px;
							font-family: Arial, Helvetica, sans-serif;
							font-size: 12px;
							text-shadow: white 1px 1px;
						}
						
							.br-slideinfo .right , .br-slideinfo .left{
								width:150px;
								height: 100%;
							}

slider determines .right, .left, .top or .bottom for this control according to its align parameter in slide content.

Circle Timer
Adds Circle Timer control to your slider
```
<li data-type="circletimer"> </li>
```
Note: This control only works in browsers that support canvas element

Parameters:
- data-color[optional]: Specifies circle stroke color
- data-stroke [optional]: Specifies circle stroke
- data-color[optional]: Specifies circle radius
CSS Styling:
You can set custom class name to its li element. Default class name is "br-circle-timer".
```
						.br-circle-timer {
							position:absolute;
							top:-28px;
							width:28px;
							height:28px;
						}
						
							.br-circle-timer .br-timer-dot {
								width:11px;
								height: 13px;
								background: url("../theme/light-controls.png") -134px -15px;
							}
					
```

Next
Adds Next button to your slider

<li data-type="next"> </li>

CSS Styling:
You can set custom class name to its li element. Default class name is "br-next".

						.br-next{
							position:absolute;
							right:-70px;
							top:46%;
							width: 35px;
							height: 35px;
							background: url("../theme/light-controls.png") -44px -4px;
						}

Previous
Adds Previous button to your slider

<li data-type="previous"> </li>

CSS Styling:
You can set custom class name to its li element. Default class name is "br-previous".

						.br-previous{
							position:absolute;
							left:-70px;
							top:46%;
							width: 35px;
							height: 35px;
							background: url("../theme/light-controls.png") -4px -4px;
							
						}

Slide Control
Adds Slide Control to your slider

<li data-type="slidecontrol"> </li>

Parameters:

data-thumb[optional]: Indicates whether thumb will show on mouse over slide control points, default value "true"
data-thumbaling [optional]: Specifies that the thumb align to top or bottom

CSS Styling:
You can set custom class name to its li element. Default class name is "br-slidecontrols".

						.br-slidecontrol{
							position:absolute;
							list-style: none;
							top:-25px;
							right:0px;
							z-index:10;
						}
						
							.br-slidecontrol ul li{
								display: block;
								position:relative;
								margin:2px;
								float:left;
								width:14px;
								height: 15px;
								background: url("../theme/light-controls.png") -113px -14px;
							}
							
							.br-slidecontrol ul li .br-control-selected{
								display: block;
								width:14px;
								height: 15px;
								background: url("../theme/light-controls.png") -92px -14px;
							}
						
						
						.br-thumb-bottom {
							left: -36px;
							position: relative;
						}
						
						.br-thumb-up {
							left: -36px;
							top:-143px;
							position: relative;
						}
						
							.br-thumb-bottom .br-thumb-frame { 
								background: url("../theme/thumb-frame.png") -0px -7px;
								width: 92px;
								height: 95px;
							}
							
							.br-thumb-up .br-thumb-frame { 
								background: url("../theme/thumb-frame.png") -89px 1px;
								width: 92px;
								height: 95px;
							}
							
							.br-thumb-bottom .br-thumb-img , .br-thumb-up .br-thumb-img{ 
								position:absolute;
								top: 17px;
								left: 15px;
								width:60px;
								height:60px;
							}

Bar timer
Adds Bar timer to your slider

<li data-type="bartimer"> </li>

CSS Styling:
You can set custom class name to its li element. Default class name is "br-bar-timer".

						.br-bar-timer{
							height: 6px;
							position:absolute;
							bottom:0px;
						}
						
							.br-bar-timer .br-timer-glow{
							 	height: 7px;
								background: url("../theme/light-timer-glow.png");
								width: 104px;
							}
							 
							.br-bar-timer .br-timer-bar{
							 	height: 2px;
								background-color: white;
								position: absolute;
								top: 4px;
							}

I) JS Slider Setup - top

It's so simple you only need to create an new Cute.Slider object and run its setup method with cute slider id.
Example:
Add following at the end of body or in page onload event.
"my-cute-slider" is your slider id that defined in Cute slider markup.
"slider-wrapper" is your slider wrapper element id that determines slider width.

 
		<script>
			var myslider = new Cute.Slider();
			myslider.setup("my-cute-slider" , "slider-wrapper");
		</script>

J) Javascript API - top

Slider Events:

Cute.SliderEvent.CHANGE_START: Dispatched when slide changing starts.
Cute.SliderEvent.CHANGE_END: Dispatched when slide changing ends.
Cute.SliderEvent.WATING: Dispatches as long as slider is standing in one slide.
Cute.SliderEvent.CHANGE_NEXT_SLIDE: Will Dispatche when next slide of slider changes.
Cute.SliderEvent.WATING_FOR_NEXT: Dispatches until slider is waiting for next slide loading.

You can use these events like following example:

				var slider = new Cute.Slider();
				slider.setup("my-slider");
				
				this.change = function(event){
					console.log(event.target , 'change started');
				}
				
				slider.api.addEventListener(Cute.SliderEvent.CHANGE_START , this.change , this);

Slider API Methods:
Note: You can access slider api object directly by "slider.api" and in event listener with "event.target".

next() : Goes to next slide.
previous() : Goes to previous slide.
pause() : Stops the slider timer.
play() : Starts the slider timer.
getNextIndex() : Returns the index of the next slide.
getPreviousIndex() : Returns the index of the previous slide.
gotoSlide(index , skipDelay) : Determines the next slide.
Parameters:
index: The next slide's index.
skipDelay: If skipDelay be true, slider skips the slide showing delay and shows next slide immediately.
getSlideList() : Returns an array of all slides.
getNextSlide() : Returns the next determined slide in slider.
getCurrentSlide() : Returns the current slide of slider.
getCurrentSlideIndex() : Returns the current slide index of slider.
delayProgress() : Returns a value that indicates how long is past from showing delay.

Slider Methos:

play() : Starts slider timer.
pause() : Stops slider timer.

Once again, thank you so much for purchasing Cute slider.
If you like this item please rate it in your download page.
Here is our profile in codecanyon: 静态模板

Go To Table of Contents

Cute Slider

Documentation

Version 2.0

Table of Contents