Homepage Slideshow with Highlighted Text

Swipeable responsive homepage hero slideshow with highlighted text 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="ht-slideshow">
<div class="slide" style="background-image: url(/images/books-1200-450.png)">
<div class="hero-text">
<h2>
<span class="highlighted">20 Websites to Sell</span><br>
<span class="highlighted">Your E-book</span>
</h2>
</div>
</div>
<div class="slide" style="background-image: url(/images/tablet-coffee-1200-450.png)">
<div class="hero-text">
<h2>
<span class="highlighted">Everything You Need </span><br>
<span class="highlighted">To Work From Everywhere</span></h2>
</div>
</div>
<div class="slide" style="background-image: url(/images/music-gear-1200-450.png)">
<div class="hero-text">
<h2>
<span class="highlighted">How to Write Music</span><br>
<span class="highlighted">At Home</span></h2>
</div>
</div>
<div class="slide" style="background-image: url(/images/brick-wall-1200-450.png)">
<div class="hero-text">
<h2>
<span class="highlighted">Creative Home Office Ideas</span><br>
<span class="highlighted">To Work in Style</span></h2>
</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 */

.ht-slideshow {
position: relative;
}

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

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

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

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

.ht-slideshow .hero-text h2 {
color: #fff;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
letter-spacing: 1.5px;
font-weight:900;
}

.ht-slideshow .highlighted {
display:inline-block;
background: rgba(0,0,0,0.6);
padding: 5px 15px;
}

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

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

.ht-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%;
}

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

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

.ht-slideshow .slick-prev,
.ht-slideshow .slick-next {
background: rgba(0,0,0,0.6);
position: absolute;
top: 20px;
vertical-align: baseline;
width: 40px;
height: 40px;
padding: 10px 0;
cursor: pointer;
color: #fff;
border: none;
outline: none;
z-index: 1;
font-size: 17px;
line-height: 26px;
text-align: center;
visibility: hidden;
}

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

.ht-slideshow .slick-prev {
right: 62px;
}

.ht-slideshow .slick-next {
right: 20px;
}

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

.ht-slideshow .hero-text {
top: 35%;
padding: 0 50px;
}

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

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

.ht-slideshow .slick-prev,
.ht-slideshow .slick-next {
visibility: visible;
}
}
CSS
$(document).ready(function(){
$('.ht-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:
           
8+