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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1286閲覧

swiperのslider作成にて

fujiharay

総合スコア0

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/10/17 13:01

http://aminomason.jp/
上記のサイトで使われているスライダーを
https://medium.com/@bbxxuw/swiper%E3%81%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E6%99%82%E3%81%AB%E8%A4%87%E9%9B%91%E3%81%AA%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E3%81%84-d475607a060a
こちらのサイトを参考にしてswiper(v4.5.3)を使い制作しているのですがうまくいきません
表示されている画像に左から右へ上書きしていくまでは
できたのですが
1枚目へ戻る際clip-pathが逆に動いてしまいます
ズームアウトはしなくても大丈夫なのでスライドだけ実装出来たら幸いです
ご教示ください

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="swiper.min.css"> 8 <link rel="stylesheet" href="style.css"> 9 <title>Title</title> 10</head> 11 12<body> 13 <div class="swiper-container"> 14 <div class="swiper-wrapper"> 15 <div class="swiper-slide"> 16 <div class="slide-inner"> 17 <p>テキスト</p> 18 <figure> 19 <img src="images/Page 1/no1.png" alt=""> 20 </figure> 21 </div> 22 </div> 23 <div class="swiper-slide"> 24 <div class="slide-inner"> 25 <p>テキスト</p> 26 <figure> 27 <img src="images/Page 1/no2.png" alt=""> 28 </figure> 29 </div> 30 </div> 31 <div class="swiper-slide"> 32 <div class="slide-inner"> 33 <p>テキスト</p> 34 <figure> 35 <img src="images/Page 1/no3.png" alt=""> 36 </figure> 37 </div> 38 </div> 39 <div class="swiper-slide"> 40 <div class="slide-inner"> 41 <p>テキスト</p> 42 <figure> 43 <img src="images/Page 1/no4.png" alt=""> 44 </figure> 45 </div> 46 </div> 47 </div> 48 </div> 49 <script src="swiper.min.js"></script> 50 <script src="slider.js"></script> 51</body>

CSS

1.swiper-container-fade .swiper-slide { 2 opacity: 1 !important; 3} 4 5.swiper-container-fade .swiper-slide .slide-inner { 6 opacity: 1; 7 width: 200%; 8 -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); 9 clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); 10 -webkit-transition: -webkit-clip-path 2s ease-in; 11 transition: -webkit-clip-path 2s ease-in; 12 transition: clip-path 2s ease-in; 13 transition: clip-path 2s ease-in, -webkit-clip-path 2s ease-in; 14} 15 16.swiper-container-fade .swiper-slide.swiper-slide-active { 17 opacity: 1 !important; 18} 19 20.swiper-container-fade .swiper-slide.swiper-slide-active .slide-inner { 21 opacity: 1; 22 width: 200%; 23 z-index: 5 !important; 24 -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 25 clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 26} 27

Javascript

1let swipeOption = { 2 effect: "fade", 3 autoplay: { 4 delay: 3000, 5 }, 6 speed: 0, 7} 8new Swiper('.swiper-container', swipeOption); 9

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問