Не могу центрировать мой слайдер

Question

Я пробовал много вещей, чтобы центрировать этот слайдер. Это включает align = "center" style = "margin: 0 auto;" style = "margin-right: 0 auto; margin-left: 0 auto;". Все это я пробовал и на изображениях, и на слайдере. Я не уверен, в чем проблема, и любая помощь будет очень оценена. Это мой первый раз, когда вы так сожалеете, если это не правильный формат. Ниже приведен код, у меня возникли проблемы с

$("#slideshow > div:gt(0)").hide(); 
 
setInterval(function() { 
 
    $('#slideshow > div:first') 
 
    .fadeOut(1000) 
 
    .next() 
 
    .fadeIn(1000) 
 
    .end() 
 
    .appendTo('#slideshow'); 
 
}, 3000);

#slideshow { 
 
    margin: 0px auto; 
 
    position: relative; 
 
    max-width: 1200px; 
 
    height: 720px; 
 
    <!-- padding: 10px; 
 
    --> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
 
    } 
 
    .ppt img { 
 
    margin-left: -50%; 
 
    } 
 
    .ppt li { 
 
    left: 50%; 
 
    } 
 
    #slideshow > div { 
 
    position: absolute; 
 
    } 
 
    .clear { 
 
    clear: both; 
 
    height: 0; 
 
    font-size: 1px; 
 
    line-height: 0px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <div id="slideshow"> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    <div> 
 
     <img style="height:719;" src="image.jpg"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Ваше слайд-шоу с центром. Это сами изображения, которые не центрированы. Вы можете видеть это в этом jsfiddle. Центрирование изображений будет больше связано с вашим абсолютным позиционированием. Вы можете использовать left: 50%; transform: translate(-50%, 0);, чтобы центрировать изображения, если это цель.

Answer 2

Во-первых, куча плохих практик:

• Слишком много встроенных
• Не нужно дивы внутри слайдера. Попробуйте список. Лучше управление кодом.

Теперь проблема. Вы можете просто использовать

margin: auto; 

для #slideshow для горизонтального центрирования.