- 文字サイズ変更
- 小
- 中
- 大
解決済
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>
解決方法がありましたら教えてください。
<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>
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2020/03/19 16:11
- 返信者：非公開
- 2020/03/23 20:30
このフォーラムへの質問は終了しました
質問を検索する