"slider"
Bootstrap 3.3.0 Snippet by evarevirus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="slideshow">
<div class="slideshow__contentWrap">
<h2 class="slideshow__title">True Detective</h2>
<p class="slideshow__text">True Detective is an American crime drama television series created and written by Nix Pizzolatto. The series is broadcast by the premium cable network HBO in the United States.</p>
</div>
<ul class="slideshow__container">
<li class="slideshow__item"> <img class="slideshow__image" src="http://images.alphacoders.com/483/483700.jpg"/></li>
<li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/></li>
<li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/L3PZkY5leFs/maxresdefault.jpg"/></li>
<li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/></li>
</ul>
<div class="slideshow__back">
<div class="slideshow__slidein">
<div class="overlay"></div><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/>
<h2 class="slideTitle">PREVIOUS SLIDE </h2>
</div>
<div class="slideshow__block"><img class="close" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"/></div>
<div class="slideshow__prev">
<svg width="32px" height="32px" viewBox="1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="prevBtn" sketch:type="MSArtboardGroup" stroke="#1B2023" stroke-width="2">
<g id="Btn" sketch:type="MSLayerGroup" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) ">
<path d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
<circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle>
</g>
</g>
</g>
</svg>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-color: #fff;
color: #fff;
font-family: "Perpetua", serif;
}
.slideshow {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slideshow__contentWrap {
width: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
}
.slideshow__title {
font-size: 4em;
margin: 0;
font-weight: 100;
}
.slideshow__text {
font-size: 1em;
line-height: 1.5;
font-weight: 100;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: