• 文字サイズ


解決済

bxsliderの画像が右にずれる

  • 相談者:非公開
  • 2020/03/19 14:35
こちらで教えて頂いた次のタグをサイトに埋め込んだところ、スライダーは正常に動くのですが、画像が右にずれて表示されます。(画像添付)
解決方法がありましたら教えてください。



<head>内に以下を記述==========
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>


<body>内に以下を記述==========
<style>
.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;
}
</style>

<script>
(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);
</script>

<div class="bxslider_box">
<div class="bxslider">
<ul>
<li><a href="#"><img src="画像URL" alt="画像説明文"></a></li>
<li><a href="#"><img src="画像URL" alt="画像説明文"></a></li>
<li><a href="#"><img src="画像URL" alt="画像説明文"></a></li>
<li><a href="#"><img src="画像URL" alt="画像説明文"></a></li>
</ul>
</div>
</div>
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2020/03/19 16:11
ECマスターズの田中です。

ずれを解決するには、
実際の商品ページを確認し、
原因を調べる必要がございます。

実際にずれが発生してるページのUR………(省略)………
  • 返信者:非公開
  • 2020/03/23 20:30
ECマスターズの田中です。

実際に設置されている場所を
お知らせいただき、ありがとうございました。

確認したところ、
レフトナビのキーワード・用………(省略)………