Javascript OwlCarousal相机滑块owl项目图像，如何更改左右中心的位置？

有在jquery中使用owlCarousal相机滑块经验的人能帮我吗。我想在手机上显示滑块中图像或owl项目的不同起点。现在，它只是显示更多的左向，我想移动整个图像，从右侧滑动更多。我试着在左滑块边距和变换比例上使用一些选项，但它们只是移动整个滑块，而不是图像位置，有人能帮助我如何处理owlCarousal项目或图像吗

另外，请找到我想在手机上显示的输出附件，因此我想在手机上显示半张床，为此，我需要移动滑块图像以从不同的位置开始，CSS或owlCarousal javascript有任何帮助吗？：- [！[imageoutput][1]][1] [！[imageoutputex][2][2]

style = "transform: translate3d(-8560px, 0px, 0px); transition: all 0s ease 0s; width: 13268px;" > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-08.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-09.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-10.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-11.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-12.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-13.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-14.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-15.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-01.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-02.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-03.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-04.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-05.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-06.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-07.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-08.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-09.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-10.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-11.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item animated owl-animated-out fadeOut"
style = "width: 428px; left: 428px;" > < div > < img src = "image/catalog/Slider/slide-12.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item active"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-13.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-14.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-15.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-01.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-02.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-03.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-04.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-05.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-06.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-07.jpg"
alt = "Slider" > < /div></div > < div class = "owl-item cloned"
style = "width: 428px;" > < div > < img src = "image/catalog/Slider/slide-08.jpg"
alt = "Slider" > < /div></div > < /div></div > < div class = "owl-nav disabled" > < button type = "button"
role = "presentation"
class = "owl-prev" > < span aria - label = "Previous" > ‹ < /span></button > < button type = "button"
role = "presentation"
class = "owl-next" > < span aria - label = "Next" > › < /span></button > < /div><div class="owl-dots disabled"></div > < /div>```


  [1]: https://i.stack.imgur.com/VxJjd.png
  [2]: https://i.stack.imgur.com/0azB2.png

style=“transform:translate3d（-8560px，0px，0px）；转换：所有0到0；宽度：13268px；”>
>
```
[1]: https://i.stack.imgur.com/VxJjd.png
[2]: https://i.stack.imgur.com/0azB2.png