jquery - jQuery Cycle2 カルーセルの要素の周囲の余白

Question

Cycle2 を使用して、水平方向にスクロールする jQuery 画像カルーセルを作成しています。画像はすべて均一な高さ (200px) ですが、幅が異なります。

これは、カルーセルを表示するために使用されるコードです。

<div id="outer">
    <div id="prev"></div>
    <div id="inner"
        class="cycle-slideshow"
        data-cycle-fx="carousel"
        data-cycle-timeout="0"
        data-cycle-prev="#prev"
        data-cycle-next="#next"
        data-cycle-slides="a"
        >
        <a href="/images/01.png" /><img src="/images/200/01.png" /></a>
        <a href="/images/02.png" /><img src="/images/200/02.png" /></a>
        ...
        <a href="/images/12.png" /><img src="/images/200/12.png" /></a>
    </div>
    <div id="next"></div>
</div>

...そして、これはブラウザの結果です:

カルーセルには実際には 4 つの個別の画像が表示されますが、それらの間にスペースはありません。

これは私が探している結果です:

Cycle2 カルーセルの画像に右マージンを追加したいのですが、imgまたはa要素を変更してマージンまたはパディングを含めると、カルーセルが左に正しく「ゼロ」になりません。

代わりに、最初の画像が部分的に隠れるように、カルーセルが左にずれているように見えます。次の図では、margin-right: 10px各a要素に追加しています。

メインのアートワークの周りに空白の領域を含む画像を生成する以外に、画像にマージンまたはパディングを追加する方法を誰か提案できますか?

ありがとう。