🤺

swiper使ってみた🎖️

2024/07/10に公開

JavaScript

初心者

swiper

tech

今回は思い切ってswiperを実装してみました〜〜！
（もうデプロイが不安。笑）
せっかくやったので記事に残しておきます。

導入

調べたら３つほど導入の仕方があるみたいなんですが

CDNを使う方法
npmを使う方法
忘れた笑

🤥 今回は出来るだけインストールしたくなくてCDNを使って実装する方法にしました。
まずはこの２行を追記

app/view/layout/application.html.erb

<head>
  <!-- Swiper CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>

何故かはわかりません。記事通り書いた。

実装（動くか確認）

次にまずデフォルトのレイアウトを記事から持ってきて動くか確認しました。

app/javascript/packs/application.js

//初期設定
document.addEventListener('turbolinks:load', function() {
  const swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
});

view

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <!-- 他のスライドを追加できます -->
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

これでまずrails sして動くか確認しました。
一見文字だけで動きもないので動いてないかなーと思ったけど画面押したら動きました笑😈
あぶねー。笑　気づいてよかった。

実装（レイアウト）

ちゃんと動くことは確認できたので、次は自分のしたいことを実装して行きます。
今回は下記の記事を見て実装して行きました。

私は＜Swiperデザイン調整例 2＞ってやつにしました!!

document.addEventListener('turbolinks:load', function() {
    const swiper = new Swiper('.swiper', {
      loop: true, // ループする
      autoplay: {
        delay: 0, // スライド間の待機時間（ミリ秒）スムーズにしたかった
        disableOnInteraction: false, // ユーザー操作後も自動再生を続ける
      },
      speed: 10000, // スライドの速度（ミリ秒）遅くしたかった
      pagination: {
        clickable: true, // クリック可能にする
      },

     // Swiperデザイン調整例 2
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "3",

      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 200, //奥行き
        modifier: 1,
        slideShadows: true //影あり
      },
    });
  });

controller(私はTOP)

def top
 @posts = Post.order(created_at: :desc).limit(5)
end

view(私はTOP)

<div class="container">
<h2 class="text-center about pb-3 mt-4 mb-4">〜NEW POST〜</h2>

<div class="swiper">
  <div class="swiper-wrapper">
    <% @posts.each do |post| %>
      <div class="swiper-slide">
        <div class="card h-300">
          <%= link_to post_path(post), class: "text-decoration-none text-dark" do %>
            <%= image_tag url_for(post.post_images.first), class: "card-img-top img-thumbnail", style: "object-fit: cover; height: 300px;" %>
            <div class="card-body text-center">
              <h5 class="card-title"><%= post.name %></h5>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>

</div>
</div>

今回は新規投稿の最新５件を出力しました。
レイアウトはカードにしました。
画像サイズとかは色々変えながら調整してますっ。

スクショですが本当は動いてます💟
もう少しレイアウト整えます〜〜

導入

実装（動くか確認）

実装（レイアウト）

Discussion