swiperを使用したスライダーの実装(ページ内にJQueryあり)

回答率: 85.46%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.46%

トップスライダーに関する質問

Q&A

解決済

2回答

555閲覧

swiperを使用したスライダーの実装(ページ内にJQueryあり)

総合スコア1

0グッド

1クリップ

投稿2021/10/17 17:12

編集2021/10/18 11:09

0

1

前提・実現したいこと

複数あるswiperを実装すること。右から左にスライド。
paginationの表示。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

全く反映されません。

エラーメッセージ

該当のソースコード

HTML
1
2
3            
4            
5            <div class="swiper-container1">
6                            <div class="item_list">
7                                <p>Black</p>
8                                <div class="swiper-wrapper">
9                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_black.jpg"></div>
10                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_black_2.jpg"></div>
11                                </div>
12                                <div class="swiper-pagination"></div>
13                            </div>
14                        </div>
15
16
17
18                        <div class="swiper-container2">
19                            <div class="item_list">
20                                <p>Grey</p>
21                                <div class="swiper-wrapper">
22                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_grey.jpg"></div>
23                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_grey_2.jpg"></div>
24                                </div>
25                                <div class="swiper-pagination"></div>
26                            </div>
27                        </div>
28                        
29                    
30
31                        <div class="swiper-container3">
32                            <div class="item_list">
33                                <p>Olive</p>
34                                <div class="swiper-wrapper">
35                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_olive.jpg"></div>
36                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_olive_2.jpg"></div>
37                                </div>
38                                <div class="swiper-pagination"></div>
39                            </div>
40                        </div>
41                    
42                
43
44                        <div class="swiper-container4">
45                            <div class="item_list">
46                                <p>Brown</p>
47                            <div class="swiper-wrapper">
48                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_brown.jpg"></div>
49                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_brown_2.jpg"></div>
50                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_brown_3.jpg"></div>
51                                </div>
52                            <div class="swiper-pagination"></div>
53                        </div>
54                    </div>
55                
56            
57                        <div class="swiper-container5">
58                            <div class="item_list">
59                                <p>Camel</p>
60                            <div class="swiper-wrapper">
61                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_camel.jpg"></div>
62                                    <div class="swiper-slide"><img alt="PANTS" src="/img/01/pants_camel_2.jpg"></div>
63                                </div>
64                        <div class="swiper-pagination"></div>
65                    </div>
66                </div>
67

CSS
1@charset "UTF-8";
2
3.swiper-container{
4    width: 100%;
5    margin: 30px auto;
6}
7
8.slider-wrapper{
9
10
11.swiper-slide {
12    background-repeat:auto
13    max-width: 1000px;
14    background-position: center; 
15    background-size: cover;
16}
17
18}
19
20 .item_list p{
21        font-size: 14px;
22        left: 4px;
23
24 .swiper-slide{
25        margin: 0 10px;
26    }
27
28

JavaScript
1
2$( function() {
3    const swiper = new Swiper('.swiper1', {
4        speed: 600,
5        autoplay: true,
6        loop: true,
7
8        pagination: {
9            el: '.swiper-pagination',
10        },
11
12        // Navigation arrows
13        navigation: {
14            nextEl: '.swiper-button-next',
15            prevEl: '.swiper-button-prev',
16        },
17    }
18    ),
19
20const swiper = new Swiper('.swiper2', {
21    speed: 600,
22    autoplay: true,
23    loop: true,
24
25    pagination: {
26        el: '.swiper-pagination',
27    },
28
29    // Navigation arrows
30    navigation: {
31        nextEl: '.swiper-button-next',
32        prevEl: '.swiper-button-prev',
33    },
34}
35),
36
37
38const swiper = new Swiper('.swiper4', {
39    speed: 600,
40    autoplay: true,
41    loop: true,
42
43    pagination: {
44        el: '.swiper-pagination',
45    },
46
47    // Navigation arrows
48    navigation: {
49        nextEl: '.swiper-button-next',
50        prevEl: '.swiper-button-prev',
51    },
52}
53),
54
55
56const swiper = new Swiper('.swiper5', {
57    speed: 600,
58    autoplay: true,
59    loop: true,
60
61    pagination: {
62        el: '.swiper-pagination',
63    },
64
65    // Navigation arrows
66    navigation: {
67        nextEl: '.swiper-button-next',
68        prevEl: '.swiper-button-prev',
69    },
70}
71),
72
73
74const swiper = new Swiper('.swiper6', {
75    speed: 600,
76    autoplay: true,
77    loop: true,
78
79    pagination: {
80        el: '.swiper-pagination',
81    },
82
83    // Navigation arrows
84    navigation: {
85        nextEl: '.swiper-button-next',
86        prevEl: '.swiper-button-prev',
87    },
88}
89)
90}),
91
92

試したこと

ネット検索して方々試しましたが、初心者故わかりませんでした。。。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

最新verです。

ここにより詳細な情報を記載してください。

2021/10/18 01:03

markdownを使ってソースコードを書いてください。 https://teratail.com/help/question-tips#:~:text=teratail%E3%81%A6%E3%82%99%E3%81%AF%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%88%E3%82%99%E3%82%92%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8B%E3%82%99%E3%81%A6%E3%82%99%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82 https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494

2021/10/18 04:02

markdownを使って記述いたしました。過不足あればご教授ください！何卒宜しくお願いいたします！

行動規範の内容に同意します

回答2件

0

自己解決

括弧等整えて、swiperのバージョンを揃えたら取り急ぎ動きました。ありがとうございました！

投稿2021/10/18 15:28

総合スコア1

0

とりあえず、JavaScript のかっこの対応が合っていないようです。
開いたかっこを閉じるようにしてみてください。

投稿2021/10/18 04:32

総合スコア36158

2021/10/18 04:44

修正してみました。ご確認宜しくお願いいたします！

2021/10/18 04:45

まだ閉じ忘れがあるようです。

2021/10/18 11:11

閉じてみたのですが、、、閉じ忘れがまだあればどの辺りかご教授いただけると幸いです！閉じ忘れ以外にも変更点ありますでしょうか。

2021/10/18 13:59

最後のカンマは文法エラーになりませんか？

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップスライダーに関する質問

swiperを使用したスライダーの実装(ページ内にJQueryあり)

関連した質問

同じタグがついた質問を見る