油滑的旋轉木馬不集中圖像

Question

我的頁面上有光滑的旋轉木馬和工作。儘管我沒有很多運氣，但我正在努力讓圖像成爲中心。我已經看過其他問題並嘗試了他們的解決方案，但仍然沒有運氣。

的旋轉木馬

<div class="your-class"> 
     <div class="ad1img"> 
      <img src="images/ad1.jpg" /></div> 
     <div class="ad2img"> 
      <img src="images/ad2.jpg" /></div> 
     <div class="ad3img"> 
      <img src="images/ad3.jpg" /></div> 
</div> 

Javascript代碼

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.your-class').slick({ 
       arrows: false, 
       dots: true, 
       autoplay: true, 
       swipe: false 
      }); 
     }); 
    </script> 

CSS

.ad1img { 
    margin: 0 auto; 
} 

.ad2img { 
    margin: 0 auto; 
} 

.ad3img { 
    margin: 0 auto; 
} 

Carousel Example

Answer 1

您可能需要設置外層div的寬度，然後可以中心內的內容：

https://jsfiddle.net/lucksp/uokbrrdv/

<div class="your-class"> 
    <div class="img-div" id="ad1img"> 
    <img src="https://placehold.it/650x150" /></div> 
    <div class="img-div" id="ad2img"> 
    <img src="https://placehold.it/650x150" /></div> 
    <div class="img-div" id="ad3img"> 
    <img src="https://placehold.it/650x150" /></div> 
</div> 
.your-class { 
    width: 800px; 
    border: 1px solid black; 
} 

.img-div { 
    width: 100%; 
} 

.img-div img { 
    margin: 0 auto; 
} 
$(document).ready(function() { 
    $('.your-class').slick({ 
    arrows: false, 
    dots: true, 
    autoplay: true, 
    swipe: false 
    }); 
}); 

Answer 2

使用CSS這樣的類：

$(document).ready(function() { 
 
      $('.your-class').slick({ 
 
       arrows: false, 
 
       dots: true, 
 
       autoplay: true, 
 
       swipe: false 
 
      }); 
 
     });

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
 
<!-- Add the slick-theme.css if you want default styling --> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/> 
 

 
.your-class { 
 
    width: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
.ad1img { 
 
    margin: auto; 
 
    width: 50%; 
 
    padding: 10px; 
 
} 
 

 
.ad2img { 
 
    margin: auto ; 
 
    width: 50%; 
 
    
 
    padding: 10px; 
 
} 
 

 
.ad3img { 
 
    margin: auto; 
 
    width: 50%; 
 
    
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<div class="your-class"> 
 
     <div class="ad1img"> 
 
      <img src="images/ad1.jpg" /></div> 
 
     <div class="ad2img"> 
 
      <img src="images/ad2.jpg" /></div> 
 
     <div class="ad3img"> 
 
      <img src="images/ad3.jpg" /></div> 
 
</div>

Answer 3

你要居中你的圖像>見代碼低於 HTML

<div class="your-class"> 
     <div class="adimg ad1img"> 
      <img src="" /> 
     </div> 
     <div class="adimg ad2img"> 
      <img src="" /> 
     </div> 
     <div class="adimg ad3img"> 
      <img src="" /> 
     </div> 
</div> 

個

CSS

.adimg img{ 
    margin: 0 auto; 
}