How to make a slider using slick-slider?

Want to make when you reduce the screen images in the section were arrayed on 2 PCs and on smartphones 1. Did similar in one of the previous sections,but when I try to do everything the same as before it turns out sucks.
On the screen is represented as I had in that section and how it is in the past.
here's how I did it in the section benefits
<section class="features">
 <div class="container">
 <h2 class="section-header">benefits of working with us</h2>
 <div class="features-slider">
 <div class="features-block">
 <div class="features-img">
<picture>
 <source srcset="img/features/coin.svg " type="image/">
 <img src="img/features/coin.png" alt="coin">
</picture>
</div>
 <div class="features-text">
 the <h3>Pay for what</h3>
 <p>You pay for completed work only after their implementation. <br / > No hidden fees and interim payments.</p>
</div>
</div>
 <div class="features-block">
 <div class="features-img">
<picture>
 <source srcset="img/features/folder type="image/>
 <img src="img/features/folder.png" alt="folder">
</picture>
</div>
 <div class="features-text">
 the <h3>make a contract</h3>
 <p>Before you start work, sign a contract with a legal entity. <br / > You can be sure that all obligations are met.</p>
</div>
</div>
 <div class="features-block">
 <div class="features-img">
<picture>
 <source srcset="img/features/clock.svg" type="image/">
 <img src="img/features/clock.png" alt="clock">
</picture>
</div>
 <div class="features-text">
 the <h3>just in time</h3>
 <p>we Work strictly according to the established deadlines that are spelled out <br> in the contract. If you do not have time <br> You pay less 

</p>
</div>
</div>
 <div class="features-block">
 <div class="features-img">
<picture>
 <source srcset="img/features/piggy-bank.svg" type="image/">
 <img src="img/features/piggy-bank.png" alt="piggy-bank">
</picture>
</div>
 <div class="features-text">
 the <h3>Save on materials</h3>
 <p>We are a structural subdivision of the supplier mixes <a class="features-link" href="#">gicema.ru</a> give You the <br>great prices.</p>

</div>
</div>
</div>
 </section>

$('.features-slider').slick({
 infinite: true,
 slidesToShow: 4,
 slidesToScroll: 1,
 responsive: [

{
 breakpoint: 991,
 settings: {
 slidesToShow: 2,
 slidesToScroll: 2,
 prevArrow: '<button class="prev arrow"></button>',
 nextArrow: '<button class="next arrow"></button>'
}
},

{
 breakpoint: 776,
 settings: {
 slidesToShow: 1,
 slidesToScroll: 1,
 prevArrow: '<button class="prev arrow"></button>',
 nextArrow: '<button class="next arrow"></button>'
}
}

]

 });


And that's what I prescribed in the scheme of work
<section class="scheme">
 <div class="container">
 <div class="scheme-header">
 <h2>Scheme of work</h2>
 <p>Work on your project will include the following steps:</p>
</div>

 <div class="scheme-slider">
 <div class="row">
 <div class="col-xl-4 scheme-block">
 <img src="img/scheme/1.png" alt="">
the <h3>the Application</h3>
 <p>Leave an online application or <br>call +7 495 771 05 08</p>
</div>
 <div class="col-xl-4 scheme block scheme-two">
 <img src="img/scheme/2.png" alt="">
 the <h3>travel specialist</h3>
 <p>within 1 working day to You <br>come specialist, which <br>will perform measurements for precise<br> cost of work</p>
</div>
 <div class="col-xl-4 scheme-block">
 <img src="img/scheme/3.png" alt="">
 the <h3>Drafting of agreement</h3>
 <p>Prepare a contract and agree <br>with You</p>
</div>
 <div class="col-xl-4 scheme-scheme block-four">
 <img src="img/scheme/4.png" alt="">
 the <h3>Start work</h3>
 <p>Deliverable materials,<br>equipment, signed<br> a contract and begin work.</p>
</div>
 <div class="col-xl-4 scheme-block">
 <img src="img/scheme/5.png" alt="">
 the <h3>Completion</h3>
 <p>After work You <br>check the quality and the<br> sign the act of putting <br>pay.</p>
</div>
</div>
</div>

</div>
 </section>


$('.scheme-slider').slick({
 infinite: true,
 slidesToShow: 4,
 slidesToScroll: 1,
 responsive: [

{
 breakpoint: 991,
 settings: {
 slidesToShow: 2,
 slidesToScroll: 2,
 prevArrow: '<button class="prev arrow"></button>',
 nextArrow: '<button class="next arrow"></button>'
}
},

{
 breakpoint: 776,
 settings: {
 slidesToShow: 1,
 slidesToScroll: 1,
 prevArrow: '<button class="prev arrow"></button>',
 nextArrow: '<button class="next arrow"></button>'
}
}

]

 });


5e0e6f27bd92a314315868.jpeg
5e0e6f2f2ff23460481297.jpeg
5e0e6f37a4813549605152.jpeg
April 4th 20 at 00:36
1 answer
April 4th 20 at 00:38
Solution
slidesToShow: 2,
slidesToScroll: 1,
responsive: [
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]

Find more questions by tags CSSHTMLSlick