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

旋转木马的图像

标签： javascriptjqueryhtmlcarousel

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