iMac内部灵敏的滑动滑块

Question

我使用滑动滑块。我想在iMac PNG图片中制作一个滑块。不能做正确的方式来响应它，并使其在该png图片内滚动。请帮助解决该问题。这是我的example：

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

Answer 1

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

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; 
}