Центрируйте каждое изображение в слайдере изображения в div

Question

/* Привет, У меня есть базовый слайдер с изображениями в HTMl, с CSS. Я могу идеально его отличить, когда изображения имеют одинаковый размер. К сожалению, когда какая-то картина шире, он берет центр для самой широкой картины также для тех, у кого меньше ширины. Мой вопрос: могу ли я взять за одну фотографию за раз маржу auto и где ее разместить? */

sliderInt = 1; 
sliderNext = 2; 

$(document).ready(function() { 
$(".sliderzps > Img.1").fadeIn(300); 
startSlider(); 
}); 

function startSlider(){ 
count = $(".sliderzps > Img").size(); 


loop = setInterval(function() { 

if(sliderNext > count) { 
    sliderNext = 1; 
    sliderInt= 1; 

} 

$(".sliderzps > Img").fadeOut(0); 
$(".sliderzps > Img." + sliderNext).fadeIn(0); 
sliderInt = sliderNext; 
$(".sliderzps > Img.1").css({"margin-left": "auto", "margin-right": "auto"}); 
sliderNext = sliderNext +1; 
}, 3000) 
} 
var main = function() { 
"use strict"; 
/* code hier */}; 

Answer 1

Попробуйте это мой код:

sliderInt = 1; 
 
sliderNext = 2; 
 

 
$(document).ready(function() { 
 
    $(".sliderzps > img").hide(); 
 
    $(".sliderzps > img").eq(0).fadeIn(0); 
 
    startSlider(); 
 
}); 
 

 
function startSlider(){ 
 
    count = $(".sliderzps > img").size(); 
 
    loop = setInterval(function() { 
 
    if(sliderNext >= count) { 
 
     sliderNext = 0; 
 
    } 
 
    $(".sliderzps > img").fadeOut(0); 
 
    $(".sliderzps > img").eq(sliderNext).fadeIn(0); 
 
    sliderInt = sliderNext; 
 
    sliderNext++; 
 
    }, 3000); 
 
}

.sliderzps{ 
 
    width:200px; 
 
    margin:auto; 
 
    border:1px solid #323232; 
 
    padding:5px; 
 
} 
 
img{ 
 
    margin:auto; 
 
    width:40px; 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="sliderzps"> 
 
<img src="http://www.clarkcraft.co.uk/images/des/48040.jpg"/> 
 
<img src="http://glamorouslymommy.com/wp-content/uploads/2013/05/small-background1.jpg"/> 
 
<img src="https://d21buns5ku92am.cloudfront.net/26027/images/149697-Symbid_logo_square_blue_bg_500px-a46cbc-medium-1416847903.jpg"/> 
 
</div>