logo carousel slider html

1______________________________________________________________________________
2HTML: 
3______________________________________________________________________________
4<div class="container">
5  <section class="customer-logos slider">
6    <div class="slide"><img src="images/image1.png"></div>
7    <div class="slide"><img src="images/image2.png"></div>
8    <div class="slide"><img src="images/image3.png"></div>
9    <div class="slide"><img src="images/image4.png"></div>
10    <div class="slide"><img src="images/image5.png"></div>
11    <div class="slide"><img src="images/image6.png"></div>
12    <div class="slide"><img src="images/image7.png"></div>
13    <div class="slide"><img src="images/image8.png"></div>
14  </section>
15</div>
16
17______________________________________________________________________________
18CSS:
19______________________________________________________________________________
20
21.customer-logos {
22  background-color: #111;
23}
24
25/* Slider */
26.slick-slide {
27    margin: 0px 20px;
28}
29
30.slick-slide img {
31    width: 100%;
32}
33
34.slick-slider
35{
36    position: relative;
37    display: block;
38    box-sizing: border-box;
39    -webkit-user-select: none;
40    -moz-user-select: none;
41    -ms-user-select: none;
42            user-select: none;
43    -webkit-touch-callout: none;
44    -khtml-user-select: none;
45    -ms-touch-action: pan-y;
46        touch-action: pan-y;
47    -webkit-tap-highlight-color: transparent;
48}
49
50.slick-list
51{
52    position: relative;
53    display: block;
54    overflow: hidden;
55    margin: 0;
56    padding: 0;
57}
58.slick-list:focus
59{
60    outline: none;
61}
62.slick-list.dragging
63{
64    cursor: pointer;
65    cursor: hand;
66}
67
68.slick-slider .slick-track,
69.slick-slider .slick-list
70{
71    -webkit-transform: translate3d(0, 0, 0);
72       -moz-transform: translate3d(0, 0, 0);
73        -ms-transform: translate3d(0, 0, 0);
74         -o-transform: translate3d(0, 0, 0);
75            transform: translate3d(0, 0, 0);
76}
77
78.slick-track
79{
80    position: relative;
81    top: 0;
82    left: 0;
83    display: block;
84}
85.slick-track:before,
86.slick-track:after
87{
88    display: table;
89    content: '';
90}
91.slick-track:after
92{
93    clear: both;
94}
95.slick-loading .slick-track
96{
97    visibility: hidden;
98}
99
100.slick-slide
101{
102    display: none;
103    float: left;
104    height: 100%;
105    min-height: 1px;
106}
107[dir='rtl'] .slick-slide
108{
109    float: right;
110}
111.slick-slide img
112{
113    display: block;
114}
115.slick-slide.slick-loading img
116{
117    display: none;
118}
119.slick-slide.dragging img
120{
121    pointer-events: none;
122}
123.slick-initialized .slick-slide
124{
125    display: block;
126}
127.slick-loading .slick-slide
128{
129    visibility: hidden;
130}
131.slick-vertical .slick-slide
132{
133    display: block;
134    height: auto;
135    border: 1px solid transparent;
136}
137.slick-arrow.slick-hidden {
138    display: none;
139}
140
141_______________________________________________________________________________
142Javascript:
143______________________________________________________________________________
144
145$(document).ready(function(){
146			$('.customer-logos').slick({
147				slidesToShow: 4,
148				slidesToScroll: 1,
149				autoplay: true,
150				autoplaySpeed: 1000,
151				arrows: false,
152				dots: false,
153					pauseOnHover: false,
154					responsive: [{
155					breakpoint: 768,
156					settings: {
157						slidesToShow: 3
158					}
159				}, {
160					breakpoint: 520,
161					settings: {
162						slidesToShow: 2
163					}
164				}]
165			});
166		});