実現したいこと
Swiperを使ったスライドを作成したい
前提
いろいろなサイトを参考にしたのですが、画像のように縦並びになってスライドできるようにしたい
並んだ
試したこと
・jsとcssをダウンロードし、html文を書いたがローカルで起動した時点でうまくいかなかった。
・jsで実装したい動きを宣言して、cssは画像の大きさなどを設定することで動かせると考えたが画像が縦に並んだだけであった。
・jsがうまく読み込まれていないと考え、</body>の直前に書くことで不具合が起きないらしいと聞き、移動させたが変わりなかった。
ソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <link rel="stylesheet" type="text/css" href="swiper/swiper-bundle.min.css"/>7</head>8 9<body>10<div class="swiper">11 <div class="swiper-wrapper">12 <!-- Slides -->13 <div class="swiper-slide"><img src="https://placehold.jp/3d4070/00ffff/550x350.png?text=1"></div>14 <div class="swiper-slide"><img src="https://placehold.jp/9d4070/99ffff/550x350.png?text=2"></div>15 <div class="swiper-slide"><img src="https://placehold.jp/ed4070/ffffff/550x350.png?text=3"></div>16 </div>17 <div class="swiper-pagination"></div>18 <div class="swiper-button-prev"></div>19 <div class="swiper-button-next"></div>20</div>21<script type="text/javascript" src="swiper/swiper-bundle.min.js"></script>22</body>23</html>24
css
1/** 2 * Swiper 11.0.5 3 * Most modern mobile touch slider and framework with hardware accelerated transitions 4 * https://swiperjs.com 5 * 6 * Copyright 2014-2023 Vladimir Kharlampidi 7 * 8 * Released under the MIT License 9 * 10 * Released on: November 22, 2023 11 */12/* スライダー */13.swiper {14 width: 100%;15 max-width: 800px;16 margin: 0 auto;17}18.swiper .swiper-slide img {19 width: 100%;20}21.swiper .swiper-pagination-bullet {22 background: #fff;23}24.swiper-button-prev,25.swiper-button-next {26 position: absolute;27 top: 50%;28 transform: translateY(-50%);29 z-index: 10;30 cursor: pointer;31 background-repeat: no-repeat;32 background-size: contain;33}34/* pc・タブレット */35@media screen and (min-width:768px) {36.swiper-button-prev,37.swiper-button-next {38 width: 45px;39 height: 45px;40}41}42/* sp */43@media screen and (max-width:767px) {44.swiper-button-prev,45.swiper-button-next {46 width: 22px;47 height: 22px;48}49} 50.swiper-button-prev {51 left: 0;52 background-image: url('../images/btn_prev1.png');53}54.swiper-button-next {55 right: 0;56 background-image: url('../images/btn_next1.png');57}58
js
1 11 12const mySwiper = new Swiper('.swiper', {13 // Optional parameters14 loop: true,15 16 // If we need pagination17 pagination: {18 el: '.swiper-pagination',19 },20 21 // Navigation arrows22 navigation: {23 nextEl: '.swiper-button-next',24 prevEl: '.swiper-button-prev',25 },26 27 // And if we need scrollbar28 scrollbar: {29 el: '.swiper-scrollbar',30 },31});32
0 コメント