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; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/06 07:06
2018/08/06 07:17
2018/08/06 08:11