javascript - 光滑的旋转木马中间元素放大但在另一个元素悬停时缩小

Question

我有一个轮播，默认显示 3 个元素。在我的 Photoshop 模型中，中间的元素稍微放大了。我可以使用始终应用于中间项的 slick-center 类来实现此效果，但现在我想知道是否有可能，所以当其他元素之一与之交互(悬停)时然后放大，中间的元素将恢复正常(较小)的大小？

您认为这在插件中是否可行，还是需要自定义一点 Javascript？

我确实认为我可以在整个旋转木马悬停时缩小所有尺寸，然后放大鼠标悬停的实际元素，但这有点跳动而且不是很优雅。

代码笔:https://codepen.io/moy/pen/GGNEza

$(document).ready(function() {
  $('.slick-carousel').slick({
    centerMode: true,
    centerPadding: '0',
    slidesToShow: 3,
    arrows: false,
    dots: true,
    responsive: [{
        breakpoint: 960,
        settings: {
          centerMode: true,
          centerPadding: '120px',
          slidesToShow: 1
        }
      },
      {
        breakpoint: 600,
        settings: {
          centerMode: true,
          centerPadding: '60px',
          slidesToShow: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          centerMode: true,
          centerPadding: '30px',
          slidesToShow: 1
        }
      }
    ]
  });
});

/* Band */

.band {
  background: red;
  padding: 60px 0 30px;
  width: 100%;
}

.wrap {
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1350px;
}

/* Resorts */

.resort {
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, .30);
  margin: 30px 0;
  position: relative;
  text-align: center;
  transition: all .15s;
  transform: scale(.95);
}

.resort img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.slick-center {
  transform: scale(1.06);
  z-index: 10;
}

.test {
  padding: 30px 15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>

<div class="band">
  <div class="wrap">

    <div class="slick-carousel">
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

当悬停在任何其他 slick-slide 上时，您可以使用一个简单的 jQuery 脚本来定位 .slick-current 类并为其提供自定义类.

完成后，一组简单的 CSS 规则可以根据类调整大小来解决这个问题。

附加的 jQuery 看起来像这样:

$('.slick-slide').mouseenter(function(){
    $('.slick-current').addClass('small');
});
$('.slick-slide').mouseleave(function(){
    $('.slick-current').removeClass('small');
});

添加的 CSS 看起来像这样:

.slick-current.small {
    transform: scale(0.95);
}
.slick-slide:hover {
    transform: scale(1.06);
}

这是一个工作示例:

(您的 codepen 有点不同，所以我也用一个工作示例对它进行了 fork - here )

$(document).ready(function() {
  $('.slick-carousel').slick({
    centerMode: true,
    centerPadding: '0',
    slidesToShow: 3,
    arrows: false,
    dots: true,
    responsive: [{
        breakpoint: 960,
        settings: {
          centerMode: true,
          centerPadding: '120px',
          slidesToShow: 1
        }
      },
      {
        breakpoint: 600,
        settings: {
          centerMode: true,
          centerPadding: '60px',
          slidesToShow: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          centerMode: true,
          centerPadding: '30px',
          slidesToShow: 1
        }
      }
    ]
  });
  $('.slick-slide').mouseenter(function(){
    $('.slick-current').addClass('small');
  });
  $('.slick-slide').mouseleave(function(){
    $('.slick-current').removeClass('small');
  });
});

/* Band */

.band {
  background: red;
  padding: 60px 0 30px;
  width: 100%;
}

.wrap {
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1350px;
}

/* Resorts */

.resort {
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, .30);
  margin: 30px 0;
  position: relative;
  text-align: center;
  transition: all .15s;
  transform: scale(.95);
}

.resort img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.slick-center {
  transform: scale(1.06);
  z-index: 10;
}

.test {
  padding: 30px 15px 0;
}

.slick-current.small {
  transform: scale(1);
}
.slick-slide:hover {
  transform: scale(1.06);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>

<div class="band">
  <div class="wrap">

    <div class="slick-carousel">
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
      <div>
        <div class="resort">
          <img src="https://www.fillmurray.com/460/300" alt="ALT TEXT" />
          <div class="test">
            <h4>Spain</h4>
            <h2>Ibiza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="btn">Find Out More</a>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>