光滑的旋转木马中间项目放大但在另一个项目悬停时缩小

Question

我有一个轮播，默认显示 3 个项目。在我的 Photoshop 模型中，中间的项目稍微放大了。我可以使用始终应用于中间项的 slick-center class 来实现此效果，但现在我想知道是否可能，所以当其他项目之一与之交互（悬停）时放大，中间的项目会 return 到正常（较小）大小？

您认为这在插件中是可能的还是需要自定义位 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

您可以通过一个简单的 jQuery 脚本来实现这一点，当鼠标悬停在任何其他 slick-slide 上时，将 .slick-current class 设为目标并为其指定自定义 class。

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

额外的 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>

光滑的旋转木马中间项目放大但在另一个项目悬停时缩小

Slick carousel middle item enlarged but shrinks when another item is hovered over

html

javascript

css

jquery

slick.js