Question

我正在使用光滑的滑块。我想在iMac png图片中制作一个滑块。无法以正确的方式响应它并使其在png pic中滚动。请帮助纠正。这是我的example：

jQuery(document).ready(function(){
    jQuery(".mac-slider").slick({
    centerMode: true,
    centerPadding: '60px'
  });
});

Answer 1

您可以使用position: relative设置图像的静态宽度和高度以适合iMac屏幕和位置。

html, body{
  height: 100%; /* Body and html need to have 100% height in order to show whole background image */
}

.mac-slider {
  background-image: url('http://www.cincinnatiskinandlaser.com/wp-content/plugins/wp-graphic/templates/video/imac/images/testi_bg.png');
  background-position: top center;
  background-repeat: no-repeat;
  height: 100%; /* This also needs to have 100% height in order to show whole background image */
}

.mac-slider-item img {
  margin: 27px auto;
  opacity: 0.3;
}

.slick-current img {
  opacity: 1 !important;
  position: relative; /* Position of current image centered in iMac screen */
  left: 2px;
  top: -9px;
}

.slick-slide img{
  width: 467px; /* Static dimensions of picture to fit into iMac screen */
  height: 263px;
}

iMac内部的响应光滑滑块

1 个答案: