CODEWITHSUNDEEP
jqueryhtmlcss
newman
newman

Reputation: 421

Images not aligning in the center of slick carousel

So, I decided to use the slick carousel to do a carousel on this site I'm building and the carousel works, but I can't get the images to align in the center of the carousel and fill the page (if that makes sense?). I'm still pretty new at web development, so I'm sure I'm missing something. Anyways, here is my code....

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; 
}

What I get with that code is this--->https://i.sstatic.net/Wgjrw.jpg. Could anyone maybe explain to me what is is that I'm missing please? Preferably without laughing at me ;) Thanks!!!

Upvotes: 3

Views: 14425

Answers (3)

Pedro Rom&#227;o
Pedro Rom&#227;o

Reputation: 2327

for each image set the margin-left and margin-right auto.

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

Upvotes: 0

ugene
ugene

Reputation: 551

Consider adding this CSS to .slick-track class:

.slick-track {
  margin: 0 auto;
}

Upvotes: 3

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

You have a syntax error with your <img/> markup, e.g., <img src="img/6.jpg" height="500px" width:"1500px" align= center/>.

It should be <img src="img/6.jpg" height="500" width="1500" align= center/>. Note the = instead of the :.

Also note that the width and height attributes do not take units. You probably want to specify the dimensions using the CSS properties, in which case your markup would look like <img src="img/6.jpg" style="height:500px;width:1500px;text-align:center" />

Upvotes: 1

Related Questions