CODEWITHSUNDEEP
jquerycssslidercarouselflexslider
ricosuave
ricosuave

Reputation: 11

Flexslider Centering Issue

I am trying to use flexslider as a carousel banner on my site. For some reason I can't get the slider to center horizontally on my site. My code is as follows:

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="styles_test.css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider({
    animation: "slide"
    });
  });
</script>
</head>

<body>
<div class="slideshow">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/slideshow_preview.png" alt="Slide1"/>
            </li>
            <li>
                <img src="images/placehold.gif" alt="Slide1"/>
            </li>
            <li>
                <img src="images/placehold.gif" alt="Slide1"/>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

styles_test.css:

.slideshow {
    text-align: center;
}

.flexslider {
    width: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

As you can see in the CSS above I used two different methods to center the element. The remaining flexslider.css and jquery.flexslider.js file can be found at this website. Both files are unmodified and I think the issue lies somewhere in the flexslider.css file. Let me know if I missed anything as I am new here. Thanks for all of your help in advance.

Upvotes: 0

Views: 9964

Answers (4)

leexonline
leexonline

Reputation: 101

Building on the.big.lebowski and gopalraju's answers, this has worked for me.

  // Center the slides.
  .slides {
    width: 100% !important;
    text-align: center;
    li {
      white-space: initial;
      width: 100%;
      display: inline-block !important;
      float: none !important;
      vertical-align: top;
    }
  }

Upvotes: 0

gopalraju
gopalraju

Reputation: 2309

@the.big.lebowski Your solution worked like a charm!

Tip: Add .flexslider{white-space: nowrap;} to avoid stacking of the li's on window resize.

Upvotes: 2

the.big.lebowski
the.big.lebowski

Reputation: 279

Write this

   .slides {
        width: 100%!important;
        text-align: center;
    }
    .slides li {
         display: inline-block!important; 
        *display: inline!important; 
        float: none!important;
    }

Upvotes: 4

ricosuave
ricosuave

Reputation: 11

I have finally figured out the issue and it was painfully obvious. The flexslider.css file had browser resets in it. Therefore, I had to have that file load before my own custom css file.

Upvotes: 0

Related Questions