Wordpressにて画像がスライドできる
のを組んでますが、中々、動かなくて。

どこが、おかしいか
わかる方がいたら、アドバイスを
お願いいたします。
すみません。お手数おかけします。

<div class="container-slider flex">  <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a><img class="container-img-slider" src="画像1jpg" alt="" /></a></div> <div class="swiper-slide"><a><img class="container-img-slider" src="画像2jpg" alt="" /></a></div> <div class="swiper-slide"><a><img class="container-img-slider" src="画像3jpg" alt="" /></a></div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div>  <div class="swiper-pagination"></div> </div> <div class="swiper-container "> <div class="swiper-wrapper"> <div class="swiper-slide"><a><img class="container-img-slider" src="画像4jpg" alt="" /></a></div> <div class="swiper-slide"><a><img class="container-img-slider" src="画像5jpg" alt="" /></a></div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div>  <div class="swiper-pagination"></div> </div> <div class="swiper-container pc_only"> <div class="swiper-wrapper"> <div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div> <div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div>  <div class="swiper-pagination"></div> </div> <div class="swiper-container pc_only"> <div class="swiper-wrapper"> <div class="swiper-slide"><a><img class="container-img-slider" src="img02.jpg" alt="" /></a></div> <div class="swiper-slide"><a><img class="container-img-slider" src="img01.jpg" alt="" /></a></div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div>  <div class="swiper-pagination"></div> </div> </div> <style> 　.container.flex { width: 100%; } 　.swiper-container { width: 50%; margin: 5px !important; } 　.swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .container-slider { width: 100%; height: 600px; } .flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } @media screen and (max-width: 768px) { .pc_only { display: none !important; } } .container-img-slider { width: 100%; height: auto; opacity: 1; transition: transform 0.3s ease; } .zoom{ transform: scale(1.2); } </style> <script type="text/javascript"> $(function(){ $(".container-img-slider").on("click",function(){ $(this).toggleClass('zoom') }) }) </script>

退会済みユーザー

2021/03/22 23:29 編集

コードはマークダウン記法で記述していただけると助かります。 ```言語コード ``` 画像1jpg←ドットが抜けています。

K_3578

2021/03/23 00:49

とりあえず、ここ読んでみましょう。 https://teratail.com/help/question-tips#questionTips3-7

dit.

2021/03/23 01:43

単にスライダーを付けたいだけなら、プラグインでの方法も視野に入れてみてください。 Smart Slider 3やMeta Sliderあたりなら解説記事も多いです。

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

回答1件

ベストアンサー

追記　分かりにくいようなので文字を大きくしますねっ

僕の回答は参考にされたサイトにコードがあるはずなので、「もう一度よく探しましょう」です。

スクリプトが違うかなぁ。これだと、
「画像をクリックしたらzoomクラスを付けたり外したりしてください」
という命令になるかと思います。※というか、なります、なりました。

参考にされたページをよく見て、ちゃんとスライド用のコードを拾って、
class等を入れ替えれば動くんじゃないかなぁと愚考いたします。

↓これは全く違うコードです(スライド用じゃないです)↓

jQuery
1<script type="text/javascript">
2$(function(){
3$(".container-img-slider").on("click",function(){
4$(this).toggleClass('zoom')
5})
6})
7</script>

以下蛇足です。
もしかしたらやさしい方がコードをくれるかもしれませんが、
そもそもコード自体が違うので、
「落ち着いて参考サイトでもう一度確認してください。」
というようなことを言われるんじゃないかなぁ？と思ったり思わなかったり。

投稿2021/03/22 23:42

編集2021/03/23 00:56

退会済みユーザー

総合スコア0

Kakakaff1150253

2021/03/22 23:50

ありがとうございます。もう一度、試してみます。上記のコードで試してみますね。

退会済みユーザー

2021/03/23 00:45

僕が添付したものは動きませんよ？上記のコードは質問者さんのモノをコピペで貼っただけで同じものです。 ※ここが間違ってますよとお伝えするためです※ 参考にされたサイトにスクリプトがあるパターンが多いので、参考にするのであればそこまで参考にしましょうとお伝えしているだけです。

Kakakaff1150253

2021/03/23 03:13

たくさんのご指導ありがとうございます。参考にして試して見ますね。

退会済みユーザー

2021/03/23 04:01 編集

swiperに関してだいぶ詳しくまとめている記事を見つけたので、もし参考にされているサイトにコードが載っていない場合は、下のURLの記事を試していただくと良いかもです。ふぁいとぉー参考URL　STAND 4U　Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説 https://stand-4u.com/web/javascript/swiper.html

Kakakaff1150253

2021/03/23 12:11

みなさま、たくさんのコメントありがとうございます。レスポンシブ等の具体例に詳しく書いてございました。本当にありがとうございます。こちらを見ながら１から作成します。

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