用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>
   

Image of the carousel

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