https://github.com/cbertelegni/simple-slide.js

This is a simple template for slide.js
https://github.com/cbertelegni/simple-slide.js

javascript jquery slide

Last synced: about 2 months ago
JSON representation

This is a simple template for slide.js

• Host: GitHub
• URL: https://github.com/cbertelegni/simple-slide.js
• Owner: cbertelegni
• License: gpl-2.0
• Created: 2014-03-14T21:42:15.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2014-04-08T19:06:22.000Z (almost 11 years ago)
• Last Synced: 2023-08-02T13:53:53.700Z (over 1 year ago)
• Topics: javascript, jquery, slide
• Language: JavaScript
• Size: 168 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Simple-slide.js

===============

This is a simple template for slide.js

## Libraries

* [Jquery](http://api.jquery.com/)

* [Jquery.easing](http://gsgd.co.uk/sandbox/jquery/easing/)

## Example

### CSS

```css

	body, html, *{padding: 0;border: none} /*reset*/

	#app {position: relative; overflow: hidden; }

	#app, div#slide, ul#list li {width: 640px;  height: 480px } /* size app */

	div#slide { overflow: hidden; left:30px; }

	ul#list { overflow: hidden;}

	ul#list li { overflow: hidden; float: left; }

	div#app a.btn { display: none;}

	a.btn { position: absolute; top: 30px; display: inline-block; padding: 5px 10px; background: rgba(100, 100, 100, 0.4); color: #fff; cursor: pointer; border-radius: 4px;}

	a.btn:hover { background: rgba(100, 100, 100, 0.8); }

	a.prev { left: 0}

	a.next { right: 0}

```

###Javascript

```javascript

	$(function(){

		var config= { // config slide

			"ul" : $("ul#list"),

			"next":$("a.next"),

			"prev":$("a.prev"),

			"efecto_animacion":"easeInOutElastic",

			"beforeslide": function(){ console.log("Before Slide", this) }, // optional

			"afterslide": function(){	console.log("After Slide", this) } // optional

		}

		var slide= simple_slide(config); //start slide

```