bootstrap

bootstrap5 のモーダル内にページ内リンクがあり、そのリンクをクリックしたらモーダルを閉じたい。

Bootstrap5 Modal

https://getbootstrap.com/docs/5.1/components/modal/

ページ内リンクはスムーススクロール、かつ、モーダルを閉じる。という感じ。

モーダルのHTML

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <ul>
        <li><a href="#contents1">コンテンツ1</a></li>
        <li><a href="#contents2">コンテンツ2</a></li>
        <li><a href="#contents3">コンテンツ3</a></li>
        <li><a href="#contents4">コンテンツ4</a></li>
        <li><a href="#contents5">コンテンツ5</a></li>
      </ul>
    </div>
  </div>
</div>

bootstrap5 モーダルのJavascript

Modal getOrCreateInstance

https://getbootstrap.com/docs/5.1/components/modal/#getorcreateinstance

Modal hide

https://getbootstrap.com/docs/5.1/components/modal/#hide

var myModalEl = document.getElementById('exampleModal');
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl);

modal.hide();

スムーススクロール

https://www.fenet.jp/dotnet/column/language/javascript/7491/#JavaScript

↑JavaScriptでのスムーススクロールの実装方法↑

《例》上記サイトのようなJavascriptのみのスムーススクロールを使用する場合

～省略～
// window.scrollToでスクロール
window.scrollTo({
  top: position,
  behavior: 'smooth',
});
// この位置にModal hideを追加（スクロールが実行されたらモーダルを閉じます）
modal.hide();
～省略～

実行順としては、スムーススクロール実行後に「modal.hide();」となります。

swiper-slideが複数の時はデフォルト（ 左寄せ ）、ひとつの時のみセンター表示にしたい。

≪前提として以下のオプションを設定≫
slidesPerView: “auto”,
spaceBetween: 20,
※ Swiper 4.5.0 使用

Swiper
Swiper demo

HTML（Swiper / Multiple Slides Per View）

<div class="swiper-container">
   <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="..." alt="..."></div>
      <div class="swiper-slide"><img src="..." alt="..."></div>
      <div class="swiper-slide"><img src="..." alt="..."></div>
      <div class="swiper-slide"><img src="..." alt="..."></div>
      <div class="swiper-slide"><img src="..." alt="..."></div>
    </div>
   <div class="swiper-pagination"></div>
</div>
<div class="swiper-container">
   <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="..." alt="..."></div>
    </div>
   <div class="swiper-pagination"></div>
</div>

Javascript/jQuery

$( function () {
  $(".swiper-wrapper").each(function() {
    var swiperSlide = $(this).find('.swiper-slide');
    if(swiperSlide.length == 1) {
      $(this).addClass('justify-content-center');
      swiperSlide.addClass('mr-0');
    }
  });
});

CSS

.swiper-slide {
  width: 280px;
}
.swiper-slide img {
  max-width: 100%;
  height: auto;
}
.justify-content-center {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.mr-0 {
  margin-right: 0 !important;
}

collapse（いわゆるアコーディオン）は、一般的に閉じるボタンなど使わずに閉じますが、敢えて、閉じるボタンで閉じる場合の覚書。

bootstrap4のCollapse
https://getbootstrap.com/docs/4.3/components/collapse/

HTML

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    <p class="text-center mb-0"><a class="btn btn-link collapse-close" href="#">閉じる</a></p>
  </div>
</div>

Javascript/jQuery

$(function(){
  $('.collapse-close').click( function () {
    $(".collapse").collapse('hide');
  });
});