Search code examples
jqueryhtmlcsstwitter-bootstrapjssor

Can't center jssor slider in a bootstrap container

Useing bootstrap with jssor I haven't been able to figure out how to center my slider images. I tried to zero the margins in the code below, but the images in the slider are on the left hand side of the container. How can I can the images centered inside of a bootstrap container?

<!-- topconent -->
<div class="container topcontent">

    <div class="row">
            <div class="col-lg-12 text-center">
                    <h1>This is my header</h1>

    <div id="slider1_container" 
    style="position: relative; margin: 0px auto;">
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; overflow: hidden;
        margin 0px auto; width: 630px; height: 420px;">
            <div><img u="image" src="img/mainslider/img1.jpg" /></div>
            <div><img u="image" src="img/mainslider/img2.jpg" /></div>
        </div>
    </div>

                    <p class="lead">More info</p>
            </div>
    </div>
    <!-- /.row -->

</div>
<!-- /.topcontent -->
Solution

  • Ok figured this out. This issue was really my inexperience\infrequent use of css more than anything else.

    To center the slider I just used bootstrap containers:

    <!-- topconent -->
<div class="container topcontent">

    <div class="row">
        <div class="col-lg-12 text-center">
            <h1>This is my header</h1>

            <!-- centered container -->
            <div class="col-lg-8 col-lg-offset-2 text-center">

                <div id="slider1_container" style="position: relative; 
                top: 0px; left: 0px; width: 600px; height: 300px;">
                    <!-- Slides Container -->
                    <div u="slides" style="cursor: move; position: absolute;
                    overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
                        <div><img u="image" src="img/mainslider/img1.jpg" /></div>
                        <div><img u="image" src="img/mainslider/img2.jpg" /></div>
                    </div>
                </div>

                <p class="lead">More info</p>

            </div>
            <!-- /.centered container -->

        </div>
        <!-- /.container -->

    </div>
    <!-- /.row -->

</div>
<!-- /.topcontent -->

    Now my confusion was that I didn't think it was centered because the image did not stretch across the entire container so it was pulled to the left. I used the script on the jssor site to make the image scale and now it looks good. I saw the script before, but didn't use it because I wanted to "center" the image not "make it responsive" and didn't realize that this is the purpose of making it responsive! derp. It maintains the aspect ratio as well.