swiperファーストビュー時に画像が三分割されたりします
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 265
swiperを2つ設置しており、1つはメイン画像として1枚でSliderさせ、もう1つはギャラリーみたいな感じで3分割表示させております。
2つともうまく動いて問題ないのですが、タイトル通り、ファーストビュー時に1枚でSlider表示させてるメイン画像がうまく表示できません。
※更新おせばすぐ直りますが、なんとか最初に見える時でもきれいに見せたいです。
var mySwiper = new Swiper('.swiper-container'{
pagination: '.swiper-pagination',
loop: true,
simulateTouch: true,
slidesPerView: 3,
slidesPerGroup: 1,
spaceBetween: 30,
speed: 800,
centeredSlides: true,
initialSlide: 1,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints:
{
780: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 10
},
960: {
slidesPerView: 2,
slidesPerGroup: 1,
spaceBetween: 20
}
}
}
);
var mySwiper = new Swiper ('.slide .swiper-container', {
loop: true,
speed: 600,
slidesPerView: 1,
spaceBetween: 10,
direction: 'horizontal',
effect: 'slide',
autoplay: {
delay: 3000,
stopOnLast: false,
disableOnInteraction: true
},
breakpoints: {
980: {
slidesPerView: 1,
spaceBetween: 30
},
640: {
slidesPerView: 1,
spaceBetween: 20
}
},
});
<div class="slide">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<figure>
<img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
</figure>
</div>
<div class="swiper-slide">
<figure>
<img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
</figure>
</div>
<div class="swiper-slide">
<figure>
<img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
</figure>
</div>
</div>
</div>
</div>
<div class="swiper-container-wrapper index_width">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="images/facility_img01.png" alt="" class="shape">
</div>
<div class="swiper-slide">
<img src="images/facility_img02.png" alt="" class="shape">
</div>
<div class="swiper-slide">
<img src="images/facility_img03.png" alt="" class="shape">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- swiper-container-wrapper -->
.swiper-container-wrapper {
position: relative;
margin: auto;
margin: 20px;
margin-bottom: 5em;
}
.swiper-container{
width: 100%;
max-width:1280px;
padding:0;
text-align: center;
}
.swiper-container .swiper-slide .mini-calendar{
width: 100%;
/* max-width: 420px; */
max-width: 99%;
margin: 0.1rem;
}
.prettyprint{
border: none;
background: #fafafa;
color: #697d86;
}
.swiper-button-prev {
background-image: url("../images/arrow01.png") !important;
}
.swiper-button-next {
background-image: url("../images/arrow02.png") !important;
}
.swiper-button-prev02{
margin-top: -25px;
}
.button-prev02{
display: none!important;
margin-top:0;
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
同じ要素に2回 Swiper が適用されてしまっているのでおかしなことになっているのだと思います。
最初の new Swiper('.swiper-container', ...)
で .slide .swiper-container
にあたるスライドにも適用されてしまっています。
id 属性を設定し、new Swiper('#ID', ...)
のようにしてしまえば良いかなと思います。
追記
<div class="slide">
<!-- Slider main container -->
<div class="swiper-container" id="slider-1">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<figure>
<img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
</figure>
</div>
<div class="swiper-slide">
<figure>
<img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
</figure>
</div>
<div class="swiper-slide">
<figure>
<img class="object_fit_img" src="images/main.jpg" alt="メイン画像">
</figure>
</div>
</div>
</div>
</div>
<div class="swiper-container-wrapper index_width">
<!-- Slider main container -->
<div class="swiper-container" id="slider-2">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="images/facility_img01.png" alt="" class="shape">
</div>
<div class="swiper-slide">
<img src="images/facility_img02.png" alt="" class="shape">
</div>
<div class="swiper-slide">
<img src="images/facility_img03.png" alt="" class="shape">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- swiper-container-wrapper -->
var swiperSlider1 = new Swiper ('#slider-1', {
loop: true,
speed: 600,
slidesPerView: 1,
spaceBetween: 10,
direction: 'horizontal',
effect: 'slide',
autoplay: {
delay: 3000,
stopOnLast: false,
disableOnInteraction: true
},
breakpoints: {
980: {
slidesPerView: 1,
spaceBetween: 30
},
640: {
slidesPerView: 1,
spaceBetween: 20
}
},
});
var swiperSlider2 = new Swiper('#slider-2', {
pagination: '.swiper-pagination',
loop: true,
simulateTouch: true,
slidesPerView: 3,
slidesPerGroup: 1,
spaceBetween: 30,
speed: 800,
centeredSlides: true,
initialSlide: 1,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints:
{
780: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 10
},
960: {
slidesPerView: 2,
slidesPerGroup: 1,
spaceBetween: 20
}
}
}
);
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2018/08/06 16:06
2018/08/06 16:17
2018/08/06 17:11