Создание Карусели с Jquery

Question

Я создал двухрядную карусель (HTML-код и скриншот ниже).

1. Как заставить их работать с JQuery или Javascript ->, когда я нажимаю стрелку «вправо» или «влево», чтобы переместить обе строки одновременно, по одному изображению за раз?

2. Как сделать, чтобы первое изображение справа в первом ряду было в фокусе?

       <div class="arrows-row2">
         <div class="arrow-item next">
           <button onclick="changeSlide('next')">
             <img src="images/str_des_crna.png" alt="">
           </button>
         </div>
         <div class="arrow-item">
           <button onclick="changeSlide('previous')">
             <img src="images/str_left_crna.png" alt="">
           </button>
         </div>
       </div>
     </div>
   </div>
   <div class="slider__right">
     <h1>Lorem, ipsum dolor.</h1>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, 
      consequatur.</p>
   </div>
   

Изображение карусели

Answer 1

Для первого пункта, это должно помочь вам

$(function () {
    var slick = $('.your-class').slick({
        appendArrows: $('#arrows')
    });

    $('.slick-next').on('click', function () {
        slick.slickNext();
    });
    $('.slick-prev').on('click', function () {
        slick.slickPrev();
    }); });

Демо jsfiddle