【カラーミーショップ】スライドショーの画像が意図したものより大きく表示される

Question

お世話になっております。
表題の通り、スライドショーの画像が意図した大きさにならず、困惑しております。
アドバイスいただけますと助かります。カラーミーショップはセマンテックではなくxhtmlにて記述されます。

まずは画面キャプチャーから
###現行サイト

###カラーミーショップ移植中サイト

スライドショーは5回転で、すべて同じように拡大されて表示されます。

<main>
	<h2 class="maincopy">月のような<br class="sp">あなたの満ち欠けをまるごと愛する
	<br>癒しのジュエリーブランドです
</h2>
<div class="bg-slider"></div>

/*メイン画像*/
.bg-slider {
	width: 100vw;
	height: 100vh;
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top:-30px;

}
.maincopy{
	top:700px;
	color: #fff;
	font-size:24px;
	letter-spacing: .25em;
	font-family:"Lato","sans-serif","ryo-gothic-plusn";
	font-weight: 300;
	position: relative;
	text-align: center;
	line-height: 1.7em;

}

	//bgSwitcherの詳細設定


	jQuery(function(){
    var windowWidth = $(window).width();
    var windowSm = 640; //もしwindow幅が640pxより狭い場合
    var bgImages;
    if(windowWidth <= windowSm) {
        bgImages = ["https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide01.jpg?cmsp_timestamp=20211130055356", 
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide02.jpg?cmsp_timestamp=20211130055409", 
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide03.jpg?cmsp_timestamp=20211130055421",
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide04.jpg?cmsp_timestamp=20211130055430",
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide05.jpg?cmsp_timestamp=20211130055441"];  //sp用の画像に差し替える
    } else {
        bgImages = ["https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide01.jpg?cmsp_timestamp=20211130060139", 
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide02.jpg?cmsp_timestamp=20211130060213", 
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide03.jpg?cmsp_timestamp=20211130060225",
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide04.jpg?cmsp_timestamp=20211130060236",
										"https://img21.shop-pro.jp/PA01476/875/etc/sp_main_slide05.jpg?cmsp_timestamp=20211130060247"];
    }
    $('.bg-slider').bgSwitcher({
        images: bgImages,
        effect: "fade",
        easing: "swing",
        loop: true,
		interval: 5000, // 背景画像を切り替える間隔を指定 3000=3秒
		duration: 1000, // エフェクトの時間を指定します。
    });
});

どうぞよろしくお願いします。

Comments

[Lhankor_Mhy]

bgSwitcher とはこれですか？
https://github.com/rewish/jquery-bgswitcher

[ema-material]

コメントありがとうございます。はい、そのjQueryを使用しております。

Answer 1

https://nilsanda.com/
このページで使っている画像と違うもののようです。

PC画面はSP用画像ではなくてPC用画像（https://img21.shop-pro.jp/PA01476/875/etc/main_slide01.jpgなど）を使った方がいいのではないかと思います。

Comments

[ema-material]

回答ありがとうございます。自分の凡ミスにびっくりしました。

上記ご指摘通りです。レスポンシブ用のPC側の指示にもSP用の画像をはめ込んでいました。

絶対パスで画像だけ表示させてみて、回答の意図に気がつきました。
ありがとうございます。ご指摘感謝します。