Swiperスライダー横幅をフルスクリーンにしたい

Question

前提・実現したいこと

Swiperスライダーを実装しようとして色々調べていますが、うまくいきません。
Swiper 5.3.1をダウンロードして実装しています。

現在は、横幅を指定しても任意のサイズになってくれなくて
最終的にはPCで見たときに画面いっぱいのフルスクリーンにしたいです。

初心者です。どうかご教授を！！！

HTML

<div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img src="images/fg_slide_01.jpg"></div> <div class="swiper-slide"><img src="images/fg_slide_02.jpg"></div> <div class="swiper-slide"><img src="images/fg_slide_03.jpg"></div> <div class="swiper-slide"><img src="images/fg_slide_04.jpg"></div> <div class="swiper-slide"><img src="images/fg_slide_05.jpg"></div> <div class="swiper-slide"><img src="images/fg_slide_06.jpg"></div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

試したこと

indexのhtmlファイルでbodyタグの前に下記を記述

JS

var myswiper = new Swiper('.swiper-container', {
      // ここからはオプションです。
	slidepreveu: true,
	speed:2000,
      effect: 'fade',
		fadeeffect: {
			crossfade:true
		},
			navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  autoplay: {
  delay: 2000,
  disableOnInteraction: false,},
  
  pagination: {
          el: '.swiper-pagination',
          clickable: true,},
});	

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[gnuuu_07]

こんにちは
質問拝見させていただきました。

HTMLのbodyタグ内のコードを追記していただければ、もしかしたら解決につながるかもしれません。

[tetsuya33]

ありがとうございます。html内に上記JSを追記しております。それ以外にどのようなコードを追記すればいいでしょうか？

[gnuuu_07]

ごめんなさい、bodyタグではなく、headタグの間違いです。失礼しました。

cssの読み込み順が関係しているかもしれないと思い、追記以来をさせていただきました。

Answer 1

display: block;

Comments

[tetsuya33]

ありがとうございます。こちらのコードを.swiper-containerに追記するのでしょうか？
それともswiper-wrapperのdisplay: flex;をblockに変えるのでしょうか？
初心者ですいません...。

[katahiromz]

swiper-containerに追加