UpSlide.js

Give your website new life!

With UpSlide.js you can create a unique website with a few lines of code!

Things you can do with it?

UpSlide.js works as a beautiful photo slider. But, I started this project having a more unique idea in mind.

Instead of having it scroll through pictures, why not have it scroll through pages of the site? You could obviously have it automatically scroll the pages but that isn't very practical (but it is definitely an option).

An Example of it being used as a website (other than this one) can be found here.

How to use it?

HTML...

select

JavaScript...

select

CSS...

select

.upslide {
	position: relative;
	background-color: white;
	margin:0 auto;
	text-align: center;
	width: 85%;
	height:500px;
	overflow: auto;
	clear: both;
	overflow: hidden;
}

.upslide-arrow {
	display: block;
	position: absolute;
	left: 50%;
	width: 40px;
	height: 40px;
	opacity: .4;
	transition: all 0.5s 0s;
	-webkit-transition: all 0.5s 0s;
	-moz-transition: all 0.5s 0s;
	-ms-transition: all 0.5s 0s;
	-o-transition: all 0.5s 0s;
	z-index: 99;
}
.upslide-arrow:nth-of-type(odd) {
	top: 0px;
}

.upslide-arrow:nth-of-type(even) {
	bottom: 0px;
}

.upslide ul {
	position: absolute;
	box-sizing:border-box;
	margin: 0;
	padding: 0;
	height:100%;
	float:left;
}

.upslide li {
	background-repeat: no-repeat;
	background-position: center;
	height:100%;
}

.upslide-bannerBackground {
	position: relative;
	background-size:100% 100% !important;
	color: white;
	width: 100%;
	height:100%;
}

.upslide-bannerText {
	position: absolute;
	box-sizing:border-box;
	background-color: #0086A0;
	margin:0;
	padding: 2% 1% 2% 1%;
	color: white;
	width: 100%;
	z-index: 9;
	
	color: white;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

.upslide-thumbnailWrapper {
	position:absolute;
	box-sizing:border-box;
	border-right:1px solid black;
	border-top:1px solid black;
	border-bottom:1px solid black;
	width:10%;
	float:left;
	z-index:9999;
}

.upslide-thumbnail {
	box-sizing:border-box;
	background-size:100% 100%;
	background-repeat:no-repeat;
	border-bottom:5px solid black;
	cursor:pointer;
	width:100%;
	float:left;
	overflow:hidden;
}

.upslide-thumbnail:last-of-type {
	border-bottom:none !important;
}

.upslide-thumbnailIndicator {
	position:absolute;
	top:0px;
	z-index:99999;
}

.upslide-thumbnailTitle {
	position:relative;
	top:20px;
	font-size:1.3em;
	font-weight:bold;
}

Download!

UpSlide-1.3.zip