bxsliderの画像が右にずれる

Question

こちらで教えて頂いた次のタグをサイトに埋め込んだところ、スライダーは正常に動くのですが、画像が右にずれて表示されます。（画像添付）
解決方法がありましたら教えてください。



内に以下を記述==========




内に以下を記述==========

.bxslider {
position: relative;
}

.bxslider ul {
opacity: 0;
}

.bxslider a {
transition: 0.4s;
}

.bxslider .bx-pager {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
text-align: center;
display: flex;
justify-content: center;
}

.bxslider .bx-pager-item {
display: none;
}

.bxslider .bx-pager-item a {
background: rgba(0, 0, 0, 1);
display: inline-block;
width: 10px;
height: 10px;
text-indent: -200%;
overflow: hidden;
border-radius: 50%;
}

.bxslider .bx-pager-item a:hover {
background: rgba(0, 0, 0, 0.6);
}

.bxslider .bx-pager-item a.active {
background: rgba(160, 160, 160, 1);
}

.bxslider .bx-controls-direction {
position: absolute;
top: 50%;
left: 0;
margin-top: -1em;
width: 100%;
height: 0px;
}

.bxslider .bx-controls-direction a {
width: 40px;
height: 40px;
display: block;
background: rgba(0, 0, 0, 0.8);
position: relative;
text-indent: -100%;
overflow: hidden;
border-radius: 50%;
}

.bxslider .bx-controls-direction a:hover {
background: rgba(0, 0, 0, 0.4);
}

.bxslider .bx-controls-direction a:before,
.bxslider .bx-controls-direction a:after {
content: '';
position: absolute;
top: 12px;
left: 8px;
}

.bxslider .bx-controls-direction a:after {
width: 16px;
height: 16px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
}

.bxslider .bx-controls-direction a.bx-prev:after {
transform: rotate(-135deg);
left: 16px;
}

.bxslider .bx-prev {
float: left;
left: 0;
}

.bxslider .bx-next {
float: right;
right: 0;
}

.bxslider_box {
overflow: hidden;
}

.bxslider_box .bxslider {
max-width: 670px;
width: 100%;
height: 450px;
margin: 0 auto;
}

.bxslider_box ul li {
width: 670px;
max-width: 100%;
height: 450px;
}

.bxslider_box ul li img {
width: 100%;
height: auto;
}

.bxslider_box .bx-viewport {
overflow: visible !important;
}



(function ($) {
$(window).on('load', function () {
//横幅いっぱい
var $slide = $('.bxslider_box');
var $slide_ul = $slide.find('.bxslider > ul');
var n = $slide_ul.children('li').size();
$slide_ul.bxSlider({
infiniteLoop: true,
auto: true,
maxSlides: 2,
easing: 'easeOutExpo',
speed: 800,
pause: 2000,
onSliderLoad: function () {
$slide.find('.bx-viewport > ul').css({
width: n * 100 + 415 + '%'
});
$slide_ul.animate({
opacity: 1
}, 500);
}
}
);
});
})(jQuery);











###HR######IMG0322eea92bc7912ecf0746ba926698bf4.pngIMG0###

Answer

ECマスターズの田中です。

ずれを解決するには、
実際の商品ページを確認し、
原因を調べる必要がございます。

実際にずれが発生してるページのURLを
「投稿内容について報告する」より
お送りいただきますようお願いします。
問題などございましたら返信にてお知らせください。

Answer

ECマスターズの田中です。

実際に設置されている場所を
お知らせいただき、ありがとうございました。

確認したところ、
レフトナビのキーワード・用途などの
リンクのために設定された余白が
スライダーにも影響していることが原因でしたので、

いただいたソースに含まれる

width: n * 100 + 415 + '%'

上記1行を

width: n * 100 + 415 + '%',
margin: "auto"

上記2行に差し替えていただきますよう
お願いいたします。

また、スマートフォン閲覧時の見た目を整えるために、
いただいたソースのタグの直前に
下記内容を追記していただきますようお願いします。

@media (max-width: 767px){
	.bxslider_box .bxslider{
		height: 290px;
	}
	.bxslider_box ul{
		margin-bottom: 0;
	}
	.bxslider_box ul li{
		height: 270px;
	}
	.bxslider .bx-pager-item {
		display: inline;
		padding: 0 5px;
	}
	.bxslider .bx-controls-direction {
		display: none;
	}
}