<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid main">
<h2>First Slide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie ut sem et mollis. Phasellus sit amet ullamcorper diam. Quisque finibus felis est, sed fermentum ex laoreet ut. Sed sodales eget eros ac tempor. Praesent malesuada blandit felis ac vulputate. Vestibulum neque erat, fringilla non laoreet eu, feugiat in mi. Nam consectetur mauris nec ex vehicula, ut efficitur turpis blandit. Suspendisse ultrices hendrerit faucibus. Integer pretium nulla vitae mollis posuere. Mauris maximus pellentesque enim rhoncus hendrerit. </p>
<a class="btn btn-info next2it" href="#"> Next > </a>
<div class="slide">
<h2>Second Slide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie ut sem et mollis. Phasellus sit amet ullamcorper diam. Quisque finibus felis est, sed fermentum ex laoreet ut. Sed sodales eget eros ac tempor. Praesent malesuada blandit felis ac vulputate. Vestibulum neque erat, fringilla non laoreet eu, feugiat in mi. Nam consectetur mauris nec ex vehicula, ut efficitur turpis blandit. Suspendisse ultrices hendrerit faucibus. Integer pretium nulla vitae mollis posuere. Mauris maximus pellentesque enim rhoncus hendrerit. </p>
<a class="btn btn-info next2it" href="#"> Next > </a>
<a class="btn btn-danger closeit" href="#"> Close X </a>
<div class="slide">
<h2>Third Slide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie ut sem et mollis. Phasellus sit amet ullamcorper diam. Quisque finibus felis est, sed fermentum ex laoreet ut. Sed sodales eget eros ac tempor. Praesent malesuada blandit felis ac vulputate. Vestibulum neque erat, fringilla non laoreet eu, feugiat in mi. Nam consectetur mauris nec ex vehicula, ut efficitur turpis blandit. Suspendisse ultrices hendrerit faucibus. Integer pretium nulla vitae mollis posuere. Mauris maximus pellentesque enim rhoncus hendrerit. </p>
<a class="btn btn-info next2it" href="#"> Next > </a>
<a class="btn btn-danger closeit" href="#"> Close X </a>
<div class="slide">
<h2>Forth Slide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie ut sem et mollis. Phasellus sit amet ullamcorper diam. Quisque finibus felis est, sed fermentum ex laoreet ut. Sed sodales eget eros ac tempor. Praesent malesuada blandit felis ac vulputate. Vestibulum neque erat, fringilla non laoreet eu, feugiat in mi. Nam consectetur mauris nec ex vehicula, ut efficitur turpis blandit. Suspendisse ultrices hendrerit faucibus. Integer pretium nulla vitae mollis posuere. Mauris maximus pellentesque enim rhoncus hendrerit. </p>
<a class="btn btn-info next2it" href="#"> Next > </a>
<a class="btn btn-danger closeit" href="#"> Close X </a>
<div class="slide">
<h2>Fifth Slide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie ut sem et mollis. Phasellus sit amet ullamcorper diam. Quisque finibus felis est, sed fermentum ex laoreet ut. Sed sodales eget eros ac tempor. Praesent malesuada blandit felis ac vulputate. Vestibulum neque erat, fringilla non laoreet eu, feugiat in mi. Nam consectetur mauris nec ex vehicula, ut efficitur turpis blandit. Suspendisse ultrices hendrerit faucibus. Integer pretium nulla vitae mollis posuere. Mauris maximus pellentesque enim rhoncus hendrerit. </p>
<a class="btn btn-danger closeit" href="#"> Close X </a>
</div>
</div>
</div>
</div>
</div>
body{
font-family: 'Open Sans', sans-serif;
}
.main{
position: relative;
height: 100vh;
padding: 60px;
overflow: hidden;
}
.main .slide{
position: absolute;
width: auto;
height: 100vh;
padding: 60px;
transform: translateX(100vw);
transition: 0.7s;
top: 0;
background: #fff;
box-shadow: 0px 2px 1px rgba(0,0,0,0.4);
}
.main .slide.placed{
position: absolute;
width: calc(90vw - 60px);
height: 100vh;
transform: translateX(10vw);
transition: 0.7s;
}
.main .slide.placed.superplaced{
transform: translateX(-60px);
width: calc(100% + 60px)
transition: 0.7s;
}
$(document).ready(function(){
$(".next2it").click(function() {
$(this).next().next(".slide").addClass("placed");
$(this).parent(".slide").addClass("superplaced");
});
$(".closeit").click(function() {
$(this).parent(".slide").removeClass("placed");
$(this).parent().parent(".slide").removeClass("superplaced");
});
});
