Изображения, не совпадающие в центре гладкой карусели

Итак, я решил использовать slick carousel, чтобы сделать карусель на этом участке, который я строил, и карусель работает, но я не могу получить изображения для выравнивания в центр карусели и заполнить страницу (если это имеет смысл?). Я все еще довольно новичок в веб-разработке, поэтому я уверен, что чего-то не хватает. В любом случае, вот мой код ....Изображения, не совпадающие в центре гладкой карусели

HTML:

<!doctype html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="style.css"/> 
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
    <meta charset="utf-8"> 
</head> 
<body> 
<main id="mainContent" role="main"> 
<article role="article"> 
    <section> 
     <header id="carousel"> 
      <div class="container"> 
       <div class="single-item-rtl" dir="rtl"> 
        <div><img src="img/6.jpg" height="500px" width:"1500px" align= center/></div> 
        <div><img src="img/7.jpg"height="500px" width:"1500px" align= center/></div> 
        <div><img src="img/8.JPG" height="500px" width:"1500px" align= center/></div> 
        <div><img src="img/9.jpg" height="500px" width:"1500px" align= center/></div> 
       </div> 
      </div> 
     </header> 
    </section> 
</article> 
</main> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">  </script> 
<script type "text/javascript" src="http://code.jquery.com/jquery-migrate- 1.2.1.min.js"></script> 
<script type="text/javascript" src="slick/slick.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.single-item-rtl').slick({ 
     rtl: true, 
     autoplay: true, 
     autoplaySpeed: 3000, 
    }); 
}); 
</script> 
</body> 
</html>

CSS:

@font-face { 
font-family: "Brandon Grotesque"; 
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype"); 
} 

html, body { 
    height: 100%; 
    width: 100%; 
    padding:0; 
    margin: 0; 
} 

body { 
    font-family:"Brandon Grotesque"; 
} 

#mainContent { 
    background: #e8e8e8; 
} 

.container { 
    width: 1500px; 
    height:600px;  
    margin: auto; 
}

Что я получаю с этим кодом это --->http://imgur.com/YiB3Na3. Может ли кто-нибудь объяснить мне, что я пропустил, пожалуйста? Желательно, не смеясь надо мной;) Спасибо !!!

источник

2015-01-06 newman

У вас просто есть ссылка на ваш сайт? Или вы можете воссоздать это в скрипке? – jmore009

Я этого не делаю. Извините, его еще не организовали. Я только начал его строить. В нижней части моего сообщения есть скриншот браузера! – newman

извините ... только с этим скриншотом его сложнее отлаживать. Почему вы не делитесь http://jsfiddle.net/#run с нами .. – Lal

У вас есть синтаксическая ошибка с вашей разметкой <img/>, например, <img src="img/6.jpg" height="500px" width:"1500px" align= center/>.

Это должно быть <img src="img/6.jpg" height="500" width="1500" align= center/>. Обратите внимание на = вместо :.

Также обратите внимание, что атрибуты и height не принимают единицы измерения. Вы, вероятно, хотите, чтобы указать размеры с помощью свойств CSS, в этом случае разметка будет выглядеть как <img src="img/6.jpg" style="height:500px;width:1500px;text-align:center" />

источник

2015-01-06 16:09:47

Добавить

text-align:center;

К вашему .container класса.

Я хотел бы также рассмотреть вопрос о смене 1500px ширины просто 100%

источник

2015-01-06 16:11:58 badfilms

Попробуйте добавить этот CSS для .slick-track класса:

.slick-track { 
    margin: 0 auto; 
}

источник

2016-03-04 09:49:35 ugene

для каждого изображения установить запас-левый и правый маржу авто.

<img src="..." style="margin-left: auto; margin-right: auto">

источник

2016-06-22 11:59:56

Изображения, не совпадающие в центре гладкой карусели

ответ

Смежные вопросы