iMacの応答性の滑らかなスライダー

Question

滑らかなスライダーを使用しています。私は、iMacのPNG画像の内側にスライダを作りたいと思います。カントはそれに応答する正しい方法を行い、それをそのPNG写真の中で回転させる。それを修正するのを手伝ってください。これは私の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; 
}