JavaScript Compact Slider: Slide page elements horizontally using buttons

Recommend this page to a friend!
     
  Info   Example   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 114 All time: 393 This week: 5Up
Version License JavaScript version Categories
compact-slider 0.1BSD License1.0Animation, HTML
Description 

Author

Francesco Mapelli

This object can slide page elements horizontally using buttons.

It can take a given page element that contains a list of page elements that can be scrolled horizontally to show one element at a time.

It can switch to the next or previous slide element when the user click on arrows, or buttons to go to specific slide, or move to the next automatically after a given period of time.

Picture of Francesco Mapelli
Name: Francesco Mapelli <contact>
Classes: 1 package by
Country: Italy Italy
Age: 41
All time rank: 1555 in Italy Italy
Week rank: 6 Up1 in Italy Italy Up

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Travel365 | Guide, foto e idee viaggio per vacanze in Italia e nel Mondo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="slider.css" />
<script type="text/javascript" src="slider.js" async></script>
</head>
<body>
<div id="myslider" class="style3">
<ul>
<li><div style="width:100%;height:400px;background-color:red;display:block;text-align:center;font-size:300px;color:#fff;">Slide1</div></li>
<li><div style="width:100%;height:400px;background-color:grey;display:block;text-align:center;font-size:300px;color:#fff;">Slide2</div></li>
<li><div style="width:100%;height:400px;background-color:green;display:block;text-align:center;font-size:300px;color:#fff;">Slide3</div></li>
<li><div style="width:100%;height:400px;background-color:yellow;display:block;text-align:center;font-size:300px;color:#fff;">Slide4</div></li>
</ul>
</div>
<script>
window.addEventListener("load", function(){var mysliders=emadeSlider('myslider',{
pointer:true,
});});
</script>
</body>
</html>

Screenshots (1)  
  • Screen
  Files folder image Files (4)  
File Role Description
Accessible without login Plain text file index.htm Example index example
Accessible without login Plain text file slider.css Data css file
Plain text file slider.js Class source file

Downloadcompact-slider-2015-08-28.zip 32KB
Downloadcompact-slider-2015-08-28.tar.gz 33KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:114
This week:0
All time:393
This week:5Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.