Ruby on Rails

rails7でswiper.jsを使う方法 (importmapを使って読み込む)

本サイトの記事内にアフィリエイト広告が含まれる場合があります。

rails7でswiper.jsを使う方法のアイキャッチ画像

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

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 swiper

config/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

https://swiperjs.com/get-started

  • この記事を書いた人

awayuki

音大出身。学生時代はフリーランスでWEB制作・開発しながら、2社で長期エンジニアインターンを経験しました(2年半)。 23卒で、自社開発ベンチャー企業に入社しエンジニア・デザイナーとして働き、2024年1月起業しました! このブログでは、ブログ開設方法・プログラミング・音大からエンジニアになれた方法など書いています。 お仕事依頼はお問い合わせフォームからお問い合わせお願いします。 Zenn

-Ruby on Rails
-, ,