bodyをfadeinさせるjsを埋め込むとbxsliderのwidthが100pxになる

<!doctype html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<title>無題ドキュメント</title>
	<link rel="stylesheet" href="css/jquery.bxslider.css">
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/body_fadein.js"></script>
	<script src="js/jquery.bxSlider.min.js"></script>
	<style>
		* {
			box-sizing: border-box;
		}

		.container {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 500px;
		}

		.body1 {
			width: 50%;
			height: 150px;
			background: tomato;
		}

		.body2 {
			width: 50%;
			height: 150px;
			background: skyblue;
		}

		.body3 {
			width: 50%;
			height: 150px;
			background: lightgreen;
		}

		.body1,
		.body2,
		.body3 {
			margin: 0 auto;
		}

		.bx-viewport {
			left: 0;
			right: 0;
			box-shadow: none;
			border: none;
		}

		.bxslider li {
			height: 50vh;
			background: center / cover no-repeat;
		}

		.bxslider {
			padding: 0;
			margin: 0;
		}
	</style>
</head>

<body>
	<ul class="bxslider">
		<li style="background-image:url(img/test1.jpg);"></li>
		<li style="background-image:url(img/test2.jpg);"></li>
		<li style="background-image:url(img/test3.jpg);"></li>
		<li style="background-image:url(img/test4.jpg);"></li>
	</ul>
	<div class="container">
		<div class="body1"></div>
		<div class="body2"></div>
		<div class="body3"></div>
	</div>
	<script>
		$(function() {
			$('.bxslider').bxSlider({
				mode: 'fade',
				speed: 1000,
				pause: 4000,
				auto: true,
				pager: false,
				controls: false,
				touchEnabled: false
			});
		});
	</script>
</body>

</html>
コード

タイトルの通り、bodyをfadeinさせるjsを埋め込むと、
bxsliderの幅が100pxになり画面左に寄ります。
色々調べたのですが、bodyをfadeinさせるbody_fadein.js

$('head').append(
	'<style>body{display: none;}'
);
$(window).on("load", function () {
	$('body').delay(600).fadeIn(2000);
});
コード

のdisplay: none;やwindow.on"load"辺りが悪さをしているみたいです。
しかし、結局調べても解決策が見つかりませんでした。
jsやjqueryに関してまだまだ初心者なので、初心者にでも分かるような回答を希望します。
宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように、bxSliderの記述する場所を移動するとどうなりますか？

js
1$(window).on("load", function () {
2    $('body').delay(600).fadeIn(2000,function(){
3        $('.bxslider').bxSlider({
4            mode: 'fade',
5            speed: 1000,
6            pause: 4000,
7            auto: true,
8            pager: false,
9            controls: false,
10            touchEnabled: false
11        });
12    });
13});