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

时间：2018-06-08 08:06:28

标签： javascript jquery html css slick.js

我有一个旋转木马，默认显示3个项目。在我的Photoshop模型中，我将中间项放大了一点。我可以使用始终应用于中间项目的slick-center类来实现此效果，但现在我想知道它是否可能，因此当其中一个项目与其中一个进行交互（悬停）时然后放大，中间项目将恢复正常（较小）尺寸？

你认为这个插件是否可能，或者是否需要自定义的Javascript？

我确实认为当整个旋转木马悬停时我可以缩小所有尺寸，然后放大鼠标结束的实际项目但是有点跳跃并且不是非常优雅。

CodePen：https://codepen.io/moy/pen/GGNEza

＆＃13;
＆＃13; 
$(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
        }
      }
    ]
  });
});
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您可以使用简单的jQuery脚本来实现此目标，以便在将鼠标悬停在任何其他.slick-current上时定位slick-slide类并为其提供自定义类。

完成后，一组简单的基于类调整大小的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有点不同，所以我也用一个工作示例分叉它 - 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>

相关问题
最新问题