Rails 7.0 で標準になったimportmap を使用して、swiper.jsを読み込む方法が意外と見つからなかったので、
本ブログで紹介していこうと思います！
本記事で紹介するのは、npmやyarnを使用せずにインポートする方法になります。
rails7でswiper.jsを使う方法
gem importmapのインストール
importmapをすでにインストールしている人は飛ばしてOKです！
Gemfileに以下を記述し、
gem "importmap-rails"bundle install を実行します。
swiper.jsの導入方法
swiper.jsの導入はすごく簡単です。
まずは、インポートマップを使ったアプリケーションに新しいパッケージを追加します。
ターミナルで以下を実行してください。
bin/importmap pin swiperconfig/importmap.rb に以下のコードが追加されているはずです。
pin "swiper", to: "https://ga.jspm.io/npm:swiper@10.3.1/swiper.mjs"app/javascript/application.js など、使いたい場面で以下を書き、swiperをimoprtします。
import Swiper from "swiper";これでswiperが使えるようになりました！！🎉
あとは、swiperのドキュメントを見てコードを書いていきます。
この辺はアプリケーションに合わせて調整してください。
import Swiper from "swiper";
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</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>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>.swiper {
width: 600px;
height: 300px;
}参考記事
https://guides.rubyonrails.org/working_with_javascript_in_rails.html
