bxSliderを使った左右見切れているカルーセルの実装

スマホサイトにて、bxSliderを使って、左右に隠れている画像が見切れているカルーセルを実装しています。

説明の様に画像を用意したのですが、初期（スライド前）は、一定の位置から初めて、スライド後は横100%でスライドさせたいと思っています。

この部分がどうしても分からず、質問させていただきました。
不足があればおっしゃってください。

よろしくお願いします。

![イメージ説明]WIDTH:600

lang
1$(function(){
2var obj = $('.slider').bxSlider({
3  auto: true,
4  infiniteLoop: true,
5  responsive: true,
6  speed: 700,
7  displaySlideQty: 1,
8  pager: false,
9  controls: false,
10  slideWidth: 136,
11  minSlides: 2,
12  maxSlides: 2,
13  moveSlides: 3,
14  slideMargin: 8,
15  startSlide: 0,
16  pause: 300,//3300
17  onSlideAfter: function() {
18  obj.startAuto();
19  }
20});
21});

lang
1<div class="bx-wrapper">
2  <div class="bx-viewport">
3    <ul class="slider">
4      <li>
5        <a href="detail.html" class="textOverlay newItem">
6          <img src="dammyImg.jpg" width="200" height="100" alt="ALT">
7        </a>
8      </li>
9      <li>
10        <a href="detail.html" class="textOverlay newItem">
11          <img src="dammyImg.jpg" width="200" height="100" alt="ALT">
12        </a>
13      </li>
14      <li>
15        <a href="detail.html" class="textOverlay newItem">
16          <img src="dammyImg.jpg" width="200" height="100" alt="ALT">
17        </a>
18      </li>
19    </ul>
20  </div>
21</div>