Horizontal Centering

[JimmysBob]

Sorry if im missing something obvious but im struggling with positioning the plugin.

I am starting with the basic example with the

<div class="outer-wrap">
    <div id="my-carousel" class="bee3D--parent">
        <div class="my-item bee3D--slide">item 1</div>
        <div class="my-item bee3D--slide">item 2</div>
        <div class="my-item bee3D--slide">item 3</div>
        <div class="my-item bee3D--slide">item 4</div>
        <div class="my-item bee3D--slide">item 5</div>
        <div class="my-item bee3D--slide">item 6</div>
        <div class="my-item bee3D--slide">item 7</div>
    </div>
</div>

My CSS is as follows:

.outer-wrap{
    width:100%;
    height:300px;
}
#my-carousel{
    margin-top: 200px;  
}
.my-item{
    width:200px;
    height:200px;
    background-color:aqua;
}

And the JS

var softwarefeaturescarousel = document.getElementById('my-carousel');
var slider = new Bee3D(softwarefeaturescarousel, {
      effect: 'arc',
      focus: 4,
      listeners: {
          keys: true,
          clicks:true,
          touches: true,
          drag:true
        },
        loop:{
            enabled:true,
            continuous:true
        }
    });

And i cannot get the plugin to center! im hoping im just missing something obvious, ive attached a png of what is happening

hopefully someone can shed some light, the plugin is not in any other divs on that page, i have also tried adding a width to #my-carousel and margin-left / right:auto, ive tried setting #my-carousel to width:100%

just wont play

[lukeed]

Hey @JimmysBob

No worries!

Because you changed the slides' dimensions (width:200px; height:200px), you need to add/update the margin offsets.

By default, the values are:

.bee3D--slide {
  width: 512px;
  height: 380px;
  margin-left: -256px;
  margin-top: -190px;
}

The margin-left and margin-top are always -0.5 * (width|height).

If your new dimensions are going to be 200 x 200, your new offsets must be -100 x -100.

Hope that helps!