<div id="prev" alt="Prev" title="Prev">
<div class="arrow-left"></div>
</div>
<div id="next" alt="Next" title="Next">
<div class="arrow-right"></div>
</div>
<header>
<div id="slider">
<div class="slide" id="three">
<div class="content">
<h1 class="title">Calamity Jane</h1>
<h5 class="by-line">by Jane Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis ante ac elit placerat luctus. In vitae varius ante.</p>
<button>Read More</button>
</div>
<div class="container">
<div class="overlay"></div>
<div class="field"></div>
<div class="jright" ></div>
<div class="jleft"></div>
</div>
</div><!--/.slide-->
<div class="slide" id="two">
<div class="content">
<h1 class="title">The Lone <br>Ranger</h1>
<h5 class="by-line">by Jane Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis ante ac elit placerat luctus. In vitae varius ante.</p>
<button>Read More</button>
</div>
<div class="container">
<div class="space"></div>
<div class="cowboy" ></div>
<div class="overlay"></div>
</div>
</div><!--/.Slide-->
<div class="slide" >
<div class="content" id="one">
<h1 class="title">The Giant <br> Grizzly Bear</h1>
<h5 class="by-line">by Jane Doe</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis ante ac elit placerat luctus. In vitae varius ante.</p>
<button>Read More</button>
</div>
<div class="container">
<div class="forest"></div>
<div class="bear" ></div>
<div class="overlay"></div>
</div>
</div><!--/.Slide-->
</div><!--/.slider-->
</header>
$bg: #fff;
@import url('https://fonts.googleapis.com/css?family=Lora:400,700');
header{
width:90%;
left: 0;
right: 0;
margin: auto;
height: 800px;
position: relative;
min-width: 1200px;
font-family: 'Lora', serif;
}
#slider{
width:100%;
height: 800px;
position:absolute;
top: 0px;
overflow:hidden;
float:left;
padding:0;
}
.slide{
position:absolute;
width:100%;
height:100%;
background: #fff;
&#two{
.content{
color: #fff;
}
}
}
#prev, #next{
cursor:pointer;
z-index:100;
background:#000;
top: 300px;
height:50px;
width:50px;
display:block;
position:relative;
margin:0;
padding:0;
}
#next{
float:right;
right:0px;
}
#prev{
float:left;
left:0px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #fff;
position:relative;
top:20%;
right:-40%;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right:15px solid #fff;
position:relative;
top:20%;
left:30%;
}
.content{
position:absolute;
display: inline-block;
text-align:center;
width: 30%;
height: 100px;
z-index: 99;
color: #000;
left:0px;
opacity: 1;
h1{
font-size: 3em;
margin-bottom: 0px;
}
h5.by-line{
padding: 10px 0px;
}
p{
line-height: 1.5;
text-align: left;
font-size: 1.2em;
padding: 10px 10px 30px;
}
button{
position: relative;
padding: 10px 25px;
color: #fff;
background: #000;
border: 3px solid #000;
font-size: 1em;
font-weight: 700;
cursor: pointer;
margin: 15px auto;
}
}
.container{
position: relative;
display:inline-block;
float:left;
width:100%;
height: 100%;
background: #fff;
overflow:hidden;
div{
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.forest{
background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459311/background_qinipt_ot41xf.jpg");
background-blend-mode: lighten;
animation: forestSlide 3.5s 1 ease-in-out forwards;
}
.overlay{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459222/bear-bg_ogbfvi_npk6gr.png");
}
.bear{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459227/bear_fkpw8s_aleqcu.png"),
linear-gradient(to top, rgba(0,0,0,0), rgba(257, 257, 257, .6) 105%);
background-blend-mode: soft-light;
mix-blend-mode: hard-light;
}
}
#two{
.container{
.space{
background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459266/stars_ax7ikz_ltxio7.png"),
linear-gradient(to left, rgba(0,0,0,0), #000 120%);
background-blend-mode: hard-light;
animation: slideRight 3.5s 1 ease-in-out forwards;
}
.cowboy{
background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459229/cowboy3_u7l8qf_zojgyj.png");
mix-blend-mode: hard-light;
opacity: .5;
}
.overlay{
background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459237/cowboytran2_nm9zkn_axxkfg.png")
};
}
}
#three{
.container{
.field{
background-position: 0px 0%;
background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459246/janebg_fo1eft_xortv4.png");
background-blend-mode: scrreen;
}
.overlay{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459243/janecenter_zwa1tt_wmrqbd.png");
}
.jright{
background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459255/janeright2_wu9yuc_jfpae0.png");
mix-blend-mode: screen;
animation: slideRight 3.5s ease forwards;
}
.jleft{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459262/janeleft2_smplqu_kbfjyw.png");
mix-blend-mode: screen;
animation: slideLeft 3.5s ease forwards;
}
}
}
*{
margin:0;
padding:0;
}
@keyframes slideLeft{
0%{
left: 0%;
}
100%{
left: 15%;
}
}
@keyframes slideRight{
0%{
right: 0%;
}
100%{
right: 15%;
}
}
@keyframes forestSlide{
0%{
left: -12%;
}
100%{
left: 10%;
}
}/**
"Simple Responsive Content Slider" by Michal: https://codepen.io/Kopecky/pen/xswkb
**/
$(document).ready(function(){
// options
var speed = 500; //transition speed - fade
var autoswitch = false; //auto slider options
var autoswitch_speed = 5000; //auto slider speed
// add first initial active class
$(".slide").first().addClass("active");
// hide all slides
$(".slide").hide();
// show only active class slide
$(".active").show();
// Next Event Handler
$('#next').on('click', nextSlide);// call function nextSlide
// Prev Event Handler
$('#prev').on('click', prevSlide);// call function prevSlide
// Auto Slider Handler
if(autoswitch == true){
setInterval(nextSlide,autoswitch_speed);// call function and value 4000
}
// Switch to next slide
function nextSlide(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
// Switch to prev slide
function prevSlide(){
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':first-child')){
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
}
});
External CSS
This Pen doesn't use any external CSS resources.