<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="slider"><a class="arrow next"></a><a class="arrow prev"></a>
<ul>
<li class="active" data-slide-title="Bridge"><img src="http://gurushots.com/uploads/f5e48ab33da68a375fb54785724fe939/3_fc57f55cea96654059b761080c2a5ff8.jpg"/>
<div class="content">
<h1>photo by </h1>
<div class="by"><span>Georgi Karastoyanov</span><a href="http://gurushots.com" target="blank">GuruShots.com</a></div>
</div>
</li>
<li>
<div class="page slide1">
<h1>This is a demo textual slide</h1>
<article>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.</p>
</article>
</div>
</li>
<li><img src="http://gurushots.com/uploads/a91c155c523d0ae8b0492a5bff93e9aa/3_33a40264ce7459b576cbdc20492d7ddd.jpg"/>
<div class="content">
<h1>photo by </h1>
<div class="by"><span>Marek Saj</span><a href="http://gurushots.com" target="blank">GuruShots.com</a></div>
</div>
</li>
<li><img src="http://gurushots.com/uploads/f97cb5366ec9b793f0f746319cd35b17/3_4e980ef7c1509590e0379bf82120acda.jpg"/>
<div class="content">
<h1>photo by </h1>
<div class="by"><span>Serdar Selhep</span><a href="http://gurushots.com" target="blank">GuruShots.com</a></div>
</div>
</li>
<li><img src="http://gurushots.com/uploads/280fbdfd35283ef52c9620253556b83b/3_dee6cf4bcb8643081881d150352dd5fe.jpg"/>
<div class="content">
<h1>photo by </h1>
<div class="by"><span>Simon Beevers</span><a href="http://gurushots.com" target="blank">GuruShots.com</a></div>
</div>
</li>
<li><img src="http://gurushots.com/uploads/46e1f4293309e64eaea73046b6361b93/3_15bcc32e71971675d327a12508a5b903.jpg"/>
<div class="content">
<h1>photo by </h1>
<div class="by"><span>Shahar Ratzenberg</span><a href="http://gurushots.com" target="blank">GuruShots.com</a></div>
</div>
</li>
</ul>
</div>
<script>
// Github - https://github.com/yairEO/saSlider
// Demo - https://yaireo.github.io/saSlider/
$('.slider').saSlider();
</script>
html, body {
height: 100%;
}
body {
font: 14px 'Open Sans Condensed', 'Helvetica Neue', Arial;
background: #000;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
-webkit-transition: 0.5s cubic-bezier(0.5, 0, 0.5, 1);
transition: 0.5s cubic-bezier(0.5, 0, 0.5, 1);
cursor: -webkit-grab;
cursor: grab;
}
.slider > .arrow {
position: absolute;
z-index: 5;
top: 0;
bottom: 0;
width: 8%;
min-width: 80px;
max-width: 200px;
text-align: center;
overflow: hidden;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
font-family: Arial;
font-size: 150px;
cursor: pointer;
-webkit-transition: .4s;
transition: .4s;
}
.slider > .arrow:hover::after {
opacity: .9;
font-size: 1.2em;
line-height: .8;
}
.slider > .arrow:active {
opacity: .6;
text-shadow: 0 0 10px #FFF;
-webkit-transition: 0s;
transition: 0s;
}
.slider > .arrow::after {
opacity: .5;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
line-height: 1;
height: 180px;
margin: auto;
color: transparent;
-webkit-transition: 0.25s cubic-bezier(0.5, 0, 0.5, 1);
transition: 0.25s cubic-bezier(0.5, 0, 0.5, 1);
}
.slider > .arrow.prev {
left: 0;
}
.slider > .arrow.prev::after {
content: '\2039';
text-shadow: 60px 0px transparent, 0 0 #FFF;
}
.slider > .arrow.prev:hover::after {
text-shadow: 0 0px #FFF, -60px 0 transparent;
}
.slider > .arrow.next {
right: 0;
}
.slider > .arrow.next::after {
content: '\203A';
text-shadow: -60px 0px transparent, 0 0 #FFF;
}
.slider > .arrow.next:hover::after {
text-shadow: 0 0px #FFF, 60px 0 transparent;
}
@media screen and (max-width: 600px) {
.slider > .arrow {
min-width: 40px;
font-size: 80px;
}
.slider > .arrow::after {
height: 100px;
}
}
.slider.start > .arrow.prev {
-webkit-transform: translatex(-100%);
transform: translatex(-100%);
width: 0;
}
.slider.end > .arrow.next {
-webkit-transform: translatex(100%);
transform: translatex(100%);
width: 0;
}
.slider > .indicators {
position: absolute;
bottom: 6%;
width: 100%;
text-align: center;
z-index: 2;
}
.slider > .indicators > .wrap {
display: inline-block;
position: relative;
}
.slider > .indicators > .wrap > i, .slider > .indicators > .wrap b {
display: inline-block;
margin: 0 6px;
border-radius: 50%;
width: 0;
height: 0;
padding: 11px;
border: 3px solid rgba(255, 255, 255, 0.5);
}
.slider > .indicators > .wrap > i {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.2) inset;
cursor: pointer;
-webkit-transition: .1s ease-out;
transition: .1s ease-out;
}
.slider > .indicators > .wrap > i:hover {
border-color: #FFF;
}
.slider > .indicators > .wrap > b {
position: absolute;
background: #FFF;
margin: -2px 4px;
padding: 13px;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: 0.8s cubic-bezier(0.5, 0, 0.5, 1);
transition: 0.8s cubic-bezier(0.5, 0, 0.5, 1);
}
@media screen and (max-width: 600px) {
.slider > .indicators > .wrap > i, .slider > .indicators > .wrap b {
margin: 0 4px;
padding: 6px;
}
.slider > .indicators > .wrap > b {
margin: -2px 2px;
padding: 8px;
}
}
.slider.prevSlide ul > li {
left: auto;
right: 0;
}
.slider.prevSlide ul > li.active {
left: 0;
right: auto;
}
.slider.dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.slider.dragging > ul > li {
-webkit-transition: 0s;
transition: 0s;
}
.slider ul {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style: none;
white-space: nowrap;
font-size: 0;
}
.slider ul > li {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.9);
display: inline-block;
overflow: hidden;
width: 0;
height: 100%;
vertical-align: top;
-webkit-transition: width 0.8s cubic-bezier(0.5, 0, 0.5, 1);
transition: width 0.8s cubic-bezier(0.5, 0, 0.5, 1);
}
.slider ul > li.active {
width: 100%;
z-index: 2;
left: auto;
right: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
}
.slider ul > li.active > .content > h1 {
-webkit-transform: none;
transform: none;
-webkit-transition: 0.4s 0.8s cubic-bezier(0, 0.83, 0.45, 1);
transition: 0.4s 0.8s cubic-bezier(0, 0.83, 0.45, 1);
}
.slider ul > li.active > .content > .by {
-webkit-transform: none;
transform: none;
-webkit-transition: 0.5s 1s cubic-bezier(0, 0.83, 0.45, 1);
transition: 0.5s 1s cubic-bezier(0, 0.83, 0.45, 1);
}
.slider ul > li > img {
position: relative;
top: 50%;
left: 50%;
width: 100vw;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slider ul > li.portrait > img {
width: auto;
height: 100vh;
}
.slider ul > li > .page {
background: #222;
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
height: 100vh;
width: 100vw;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.slider ul > li > .content {
position: absolute;
left: 12%;
bottom: 10%;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
z-index: 3;
color: #FFF;
font-size: 1.5rem;
}
.slider ul > li > .content > h1 {
font: 2.6em 'Courgette', cursive;
margin: 0;
-webkit-transform: translateY(220px);
transform: translateY(220px);
-webkit-transition: .3s 60ms ease-in;
transition: .3s 60ms ease-in;
}
.slider ul > li > .content > .by {
-webkit-transform: translateY(140px);
transform: translateY(140px);
-webkit-transition: .2s ease-in;
transition: .2s ease-in;
}
.slider ul > li > .content > .by > span {
display: inline-block;
line-height: 1;
padding-right: .8em;
margin-right: .5em;
border-right: 6px solid rgba(244, 51, 86, 0.5);
}
.slider ul > li > .content > .by > a {
padding: 1px 5px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
border-radius: 6px;
-webkit-transition: .1s;
transition: .1s;
}
.slider ul > li > .content > .by > a::after {
display: inline-block;
opacity: 0;
content: 'Photo Contests';
font-size: .8em;
max-width: 0;
line-height: .9;
overflow: hidden;
-webkit-transition: .3s ease-out;
transition: .3s ease-out;
}
.slider ul > li > .content > .by > a:hover {
color: #FFF;
background: rgba(0, 0, 0, 0.2);
text-shadow: 0 0 6px #000;
}
.slider ul > li > .content > .by > a:hover::after {
max-width: 140px;
margin-left: .5em;
opacity: .6;
}
@media screen and (max-width: 600px) {
.slider ul > li > .content {
font-size: 1rem;
bottom: 16%;
}
}
.slider .page.slide1 {
white-space: normal;
padding: 2em;
font-size: 1.2rem;
box-sizing: border-box;
background-image: -webkit-radial-gradient(circle cover at center, #252233 0%, #111111 80%);
background-image: radial-gradient(circle cover at center, #252233 0%, #111111 80%);
}
.slider .page.slide1 h1 {
padding: 0;
margin: 0 0 .5em;
color: #ED0E51;
font-weight: 700;
}
.slider .page.slide1 article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule: 5px inset rgba(237, 14, 81, 0.3);
-moz-column-rule: 5px inset rgba(237, 14, 81, 0.3);
column-rule: 5px inset rgba(237, 14, 81, 0.3);
-webkit-column-gap: 5em;
-moz-column-gap: 5em;
column-gap: 5em;
color: #AAA;
}
.slider .page.slide1 article > p {
margin: 0 0 1em;
}
