Homepage Slideshow with Centered Text

Swipeable responsive homepage slideshow made with "Slick"

Below you can find an example of responsive homepage slideshow made with Slick.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="ct-slideshow">
<div class="slide" style="background-image: url(/images/city-1200x450.png)">
<div class="hero-text">
<h2>The 20 <span class="emphesized">Best Cities</span> to Live<br> in the World</h2>
<p>Berlin, Moscow, Stockholm, New York, Melbourne, Vienna and others.</p>
</div>
</div>
<div class="slide" style="background-image: url(/images/building-1200-450.png)">
<div class="hero-text">
<h2>10 <span class="emphesized">Mathematically</span> Interesting<br> Historical Buildings</h2>
<p>The Great Pyramid of Giza, Taj Mahal, Parthenon and others.</p>
</div>
</div>
<div class="slide" style="background-image: url(/images/sunrise-church-1200-450.png)">
<div class="hero-text">
<h2>Creepy <span class="emphesized">Abandoned Places</span> that are<br> Incredible</h2>
<p>Pripyat, Bodiam Castle, Sunken yacht and others.</p>
</div>
</div>
<div class="slide" style="background-image: url(/images/mountains-1200-450.png)">
<div class="hero-text">
<h2>
Most Beautiful <span class="emphesized">Mountains</span><br> around the World</h2>
<p>The Mountains are the most beautiful environments on the Planet Earth.</p>
</div>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Playfair+Display:400,900i');

@font-face {
font-family: "slideshow";
src:url("/fonts/slideshow.eot");
src:url("/fonts/slideshow.eot?#iefix") format("embedded-opentype"),
url("/fonts/slideshow.woff") format("woff"),
url("/fonts/slideshow.ttf") format("truetype"),
url("/fonts/slideshow.svg#content-blocks") format("svg");
font-weight: normal;
font-style: normal;
}

[data-icon]:before {
font-family: "slideshow" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "slideshow" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right:before {
content: "\61";
}

.icon-arrow-left:before {
content: "\62";
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #fff;
}

.container {
padding: 0 20px;
max-width: 1200px;
margin: 30px auto 0;
}

/* Slideshow Styles */

.ct-slideshow {
position: relative;
}

.ct-slideshow .slide {
position: relative;
background-position: center center;
background-size: cover;
height: 250px;
}

.ct-slideshow .slide:after {
content: '';
display: block;
background: rgba(0,0,0,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.ct-slideshow .block-image {
width: 100%;
height: auto;
}

.ct-slideshow .hero-text {
position: absolute;
z-index: 1;
color: #fff;
top: 17%;
text-align: center;
width: 100%;
padding: 0 20px;
text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
}

.ct-slideshow .hero-text h2 {
color: #fff;
font-size: 21px;
line-height: 30px;
margin-bottom: 20px;
letter-spacing: 1.5px;
}

.ct-slideshow .emphesized {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 900;
}

.ct-slideshow .hero-text p {
color: #fff;
font-size: 14px;
line-height: 24px;
font-family: 'Playfair Display', serif;
letter-spacing: 0.5px;
}


.ct-slideshow .slick-dots {
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
line-height:10px;
position: absolute;
bottom: 20px;
}

.ct-slideshow .slick-dots li {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
padding: 0;
cursor: pointer;
vertical-align: top;
}

.ct-slideshow .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 10px;
height: 10px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background-color: transparent;
border: 1px solid #fff;
border-radius:50%;
}

.ct-slideshow .slick-dots li button:hover,
.ct-slideshow .slick-dots li button:focus {
outline: none;
}

.ct-slideshow .slick-dots li.slick-active button {
background: #fff;
}

.ct-slideshow .slick-prev,
.ct-slideshow .slick-next {
position: absolute;
top: 50%;
vertical-align: baseline;
width: 40px;
height: 40px;
margin-top: -20px;
padding: 10px 0;
cursor: pointer;
color: #fff;
border: none;
outline: none;
border: 2px solid #fff;
border-radius: 50%;
z-index: 1;
font-size: 17px;
line-height: 23px;
text-align: center;
visibility: hidden;
}

.ct-slideshow .slick-prev:hover,
.ct-slideshow .slick-next:hover {
opacity: 1;
}

.ct-slideshow .slick-prev {
left: 15px;
}

.ct-slideshow .slick-next {
right: 15px;
}

/* Responsive */
@media screen and (min-width: 768px) {
.ct-slideshow .slide {
height: 450px;
}

.ct-slideshow .hero-text {
top: 30%;
padding: 0 60px;
}

.ct-slideshow .hero-text p {
font-size: 16px;
}

.ct-slideshow .hero-text h2 {
font-size: 42px;
line-height: 54px;
margin-bottom: 20px;
letter-spacing: 1.5px;
}

.ct-slideshow .slick-prev,
.ct-slideshow .slick-next {
visibility: visible;
}
}
CSS
$(document).ready(function(){
$('.ct-slideshow').slick({
dots: true,
prevArrow: '<a type="button" class="slick-prev"><i class="icon-arrow-left"></i></a>',
nextArrow: '<a type="button" class="slick-next"><i class="icon-arrow-right"></i></a>',
autoplay: true,
autoplaySpeed: 3000,
infinite: true
});
});
JavaScript/jQuery 1.x
Plugins used:
jQuery Apache 2.0
Slick MIT
Browser support:
           
9+