Question

我需要网页上的滑块，我得到光滑的滑块。我想使用滑块中心模式，但稍微更改此滑块。我想那个滑块的中心元素比滑块的其他元素更大。但我无法判断哪个班级使用中心元素，我尝试应用课程＆＃34; slick-center＆＃34;，＆＃34; slick-current＆＃34;但这种尝试不起作用。这是我的问题

＆＃13;

$('.slidy').slick({
            centerMode: true,
            centerPadding: '10px',
            slidesToShow: 3,
        responsive: [
        {
            breakpoint: 768,
        settings: {
            arrows: true,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
        }
        },
        {
        breakpoint: 480,
        settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
        }}
            ]
        });
$(document).ready(
  function() {
    var next = document.querySelector('.slick-next');
    next.onclick = function() {
      
      document.querySelector('.slick-center').style.border ="2px solid red";
      document.querySelector('.slick-center').style.transform="scale(1.2, 1.2)"
    }
  }
)

＆＃13;

.slick-prev:after {
  content: ">";
  color: red;
  font-size: 30px;
}
.slick-next:before {
  content: "<";
  color: red;
  font-size: 30px;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<div class="slidy">
  <div> peace of one </div>
  <div> peace of two </div>
  <div> peace of tree </div>
  <div> peace of four </div>
  <div> peace of five </div>
  <div> peace of six </div>
</div>

＆＃13;

如果你建议如何自己写滑块，那将很酷）

中央模式的光滑滑块

0 个答案: