Content Block with Image Slideshow

Content Card/Widget with Image Slideshow made with Slick and JQuery

Below you can find an example of responsive content block with Slick image carousel and text. This block can be a part of articles overview page, or any other place where you need such content structure. It can be used together with any HTML/CSS Framework, like Twitter Bootstrap, Zurb Foundation, Skeleton and others.

For icon panel was used icon font, generated with Fontastic. For your website you can generate your own font or use ready icon fonts like Font Awesome, Entypo or others.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="ss-block">
<div class="block-slideshow">
<img class="block-image" src="/images/fish-400-175.png">
<img class="block-image" src="/images/sandwiches-400-175.png">
<img class="block-image" src="/images/oatmeal-400-175.png">
<img class="block-image" src="/images/salad-400-175.png">
</div>
<div class="block-content">
<h2 class="block-header">4 Foods to Eat to be Healthy</h2>
<p>
These diet additions can help you with losing weight and improve your health
</p>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

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

}

[data-icon]:before {
font-family: "content-blocks" !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: "content-blocks" !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-caret-left:before {
content: "\65";
}
.icon-caret-right:before {
content: "\66";
}

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

/* Layout */

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

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

/* Block Styles */

.ss-block {
border: 1px solid #ddd;
background: #fff;
margin-bottom: 30px;
position: relative;
}

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

.ss-block .block-header {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
}

.ss-block .block-content {
padding: 15px 20px 20px;
font-size: 15px;
color: #999;
line-height: 23px;
}

.ss-block .block-slideshow {
position: relative;
margin-bottom: 25px;
}

.ss-block .slick-dots {
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
margin-top: 15px;
line-height:10px;
position: absolute;
bottom: -25px;
}

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

.ss-block .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: #ccc;
border-radius:50%;
}

.ss-block .slick-dots li button:hover,
.ss-block .slick-dots li button:focus {
outline: none;
}

.ss-block .slick-dots li.slick-active button {
background: orange;
}

.ss-block .slick-prev,
.ss-block .slick-next {
position: absolute;
top: 50%;
display: table-cell;
vertical-align: baseline;
width: 30px;
height: 30px;
margin-top: -15px;
padding: 7px 0;
cursor: pointer;
color: #333;
border: none;
outline: none;
background: #fff;
z-index: 1;
font-size: 17px;
opacity: 0.75;
text-align: center;
}

.ss-block .slick-prev:hover,
.ss-block .slick-next:hover {
opacity: 1;
}

.ss-block .slick-prev {
left: 7px;
}

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