Responsive Logo Carousel Variation 1

Responsive logo carousel with dots and previous/next buttons

Below you can find an example of responsive logo carousel made with Slick.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<h2>Our Partners</h2>
<div class="rl-carousel">
<div class="slide">
<img src="/images/logo-1.png">
</div>
<div class="slide">
<img src="/images/logo-2.png">
</div>
<div class="slide">
<img src="/images/logo-3.png">
</div>
<div class="slide">
<img src="/images/logo-4.png">
</div>
<div class="slide">
<img src="/images/logo-5.png">
</div>
<div class="slide">
<img src="/images/logo-6.png">
</div>
<div class="slide">
<img src="/images/logo-7.png">
</div>
<div class="slide">
<img src="/images/logo-8.png">
</div>
<div class="slide">
<img src="/images/logo-9.png">
</div>
<div class="slide">
<img src="/images/logo-10.png">
</div>
</div>
</div>
HTML
@charset "UTF-8";

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

}

[data-icon]:before {
font-family: "carousel" !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: "carousel" !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-chevron-left:before {
content: "\61";
}
.icon-chevron-right:before {
content: "\62";
}

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

/* Layout */

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

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

h2 {
font-size: 32px;
font-weight: normal;
}

/* Slideshow Styles */

.rl-carousel {
position: relative;
margin-top: 14px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding-top: 20px;
padding-bottom: 20px;
}

.rl-carousel .slide {
display: inline-block;
text-align: center;
vertical-align: middle;
float:none;
}

.rl-carousel .slide img {
display:inline-block;
filter: grayscale(100%);
max-width: 90%;
}

.rl-carousel .slide img:hover {
display:inline-block;
filter: grayscale(0%);
}

.rl-carousel .slick-dots {
display: block;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
line-height:10px;
display:inline-block;
margin-top: 25px;
}

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

.rl-carousel .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 #ccc;
border-radius:50%;
background: #ddd;
}

.rl-carousel .slick-dots li button:hover,
.rl-carousel .slick-dots li button:focus {
outline: none;
}

.rl-carousel .slick-dots li.slick-active button {
background: orange;
border-color: orange;
}

.rl-carousel .slick-prev,
.rl-carousel .slick-next {
background: rgba(0,0,0,0.6);
position: absolute;
top: -45px;
vertical-align: baseline;
width: 30px;
height: 30px;
padding: 5px 0;
cursor: pointer;
color: #fff;
border: none;
outline: none;
z-index: 1;
font-size: 14px;
line-height: 26px;
text-align: center;
}

.rl-carousel .slick-prev:hover,
.rl-carousel .slick-next:hover {
opacity: 1;
}

.rl-carousel .slick-prev {
right: 32px;
}

.rl-carousel .slick-next {
right: 0;
}
CSS
$(document).ready(function(){
$('.rl-carousel').slick({
dots: true,
prevArrow: '<a type="button" class="slick-prev"><i class="icon-chevron-left"></i></a>',
nextArrow: '<a type="button" class="slick-next"><i class="icon-chevron-right"></i></a>',
infinite: true,
slidesToShow: 6,
slidesToScroll: 6,
adaptiveHeight: true,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
JavaScript/jQuery 1.x
Plugins used:
jQuery Apache 2.0
Slick MIT
Browser support:
           
8+