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

質問編集履歴

7

スクロールをcssからjsライブラリのswiperに変更いたしました。

2021/02/01 06:58

投稿

DrsriN
DrsriN

スコア11

title CHANGED
File without changes
body CHANGED
@@ -71,4 +71,62 @@
71
71
  ![イメージ説明](4071848ad3ffdf54e8c1cfa0803b800a.png)
72
72
 
73
73
  ↓↓↓↓↓↓↓↓↓↓↓画像をクリックすると....↓↓↓↓↓↓
74
- ![イメージ説明](f1315a0b0826ee0fbe16e37e69107fd4.jpeg)
74
+ ![イメージ説明](f1315a0b0826ee0fbe16e37e69107fd4.jpeg)
75
+
76
+ ---------------------------追記2(スクロールをcssからjsライブラリのswiperに変更いたしました。)---------------------------
77
+ ```html
78
+ <!-- scrollpaper -->
79
+ <div id="sp-box" ontouchstart="">
80
+ <img src="img/s-c-p.png" alt="">
81
+
82
+ <div class="swiper-container">
83
+ <div class="swiper-wrapper">
84
+ <div class="swiper-slide"><img src="img/bus.png" alt="Swiper01"></div>
85
+ <div class="swiper-slide"><img src="img/casy.png" alt="Swiper02"></div>
86
+ <div class="swiper-slide"><img src="img/app.png" alt="Swiper03"></div>
87
+ <div class="swiper-slide"><img src="img/rec.png" alt="Swiper04"></div>
88
+ </div>
89
+ <div class="swiper-button-prev"></div>
90
+ <div class="swiper-button-next"></div>
91
+ </div>
92
+ </div>
93
+ ```
94
+ ```css
95
+ /* sp-box */
96
+ #sp-box{
97
+ height: 40%;
98
+ text-align: center;
99
+ position: relative;
100
+ top: 20%;
101
+ animation: fluffy 3s ease 1s infinite alternate;
102
+ }
103
+ #sp-box img{
104
+ object-fit: cover;
105
+ height: 100%;
106
+ }
107
+ .swiper-container{
108
+ width: 40vh;
109
+ height: 50%;
110
+ margin: auto;
111
+ position: absolute;
112
+ bottom: 75%;
113
+ left: 5%;
114
+ }
115
+ .swiper-button-next::after, .swiper-button-prev::after {
116
+ content: none !important;
117
+ }
118
+ ```
119
+ ```javascript
120
+ var swiper = new Swiper('.swiper-container', {
121
+ navigation: {
122
+ nextEl: '.swiper-button-next',
123
+ prevEl: '.swiper-button-prev',
124
+ },
125
+ loop: true,
126
+ effect: 'fade',
127
+ autoplay: {
128
+ delay: 5000,
129
+ disableOnInteraction: true
130
+ },
131
+ });
132
+ ```

6

タイトルの変更です。

2021/02/01 06:58

投稿

DrsriN
DrsriN

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- スライドをクリックすると拡大す機能をつけるは?
1
+ スライドショーで流れている画像をクリックするとモーダルウィンドウが開かれようしたいです。
body CHANGED
File without changes

5

具体的な動き方のイメージ画像を追加いたしました!

2021/01/29 06:48

投稿

DrsriN
DrsriN

スコア11

title CHANGED
File without changes
body CHANGED
@@ -63,4 +63,12 @@
63
63
  ```
64
64
  現状
65
65
  ---
66
- 画像スライドは実装出来ましたが、クリックしても拡大はされません。
66
+ 画像スライドは実装出来ましたが、クリックしても拡大はされません。
67
+
68
+ ---------------------------追記---------------------------
69
+ ![イメージ説明](bfde6e9127b8fd5811c0b0247bf51300.png)
70
+ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓スライドショーのように切り替わります↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
71
+ ![イメージ説明](4071848ad3ffdf54e8c1cfa0803b800a.png)
72
+
73
+ ↓↓↓↓↓↓↓↓↓↓↓画像をクリックすると....↓↓↓↓↓↓
74
+ ![イメージ説明](f1315a0b0826ee0fbe16e37e69107fd4.jpeg)

4

class="zoom"が無かったので付け足しました。

2021/01/29 05:51

投稿

DrsriN
DrsriN

スコア11

title CHANGED
File without changes
body CHANGED
@@ -9,10 +9,10 @@
9
9
  画像をクリックした時に画像が拡大されるような処理をしようとしました。
10
10
  ```html
11
11
  <div class="slide" id="makeImg">
12
-  <img src="img/app.png" alt="" onclick="zoom('img/app.png')"/>
12
+  <img src="img/app.png" alt="" onclick="zoom('img/app.png')" class="zoom"/>
13
-  <img src="img/bus.png" alt="" onclick="zoom('img/bus.png')"/>
13
+  <img src="img/bus.png" alt="" onclick="zoom('img/bus.png')" class="zoom"/>
14
-  <img src="img/casy.png" alt="" onclick="zoom('img/casy.png')"/>
14
+  <img src="img/casy.png" alt="" onclick="zoom('img/casy.png')" class="zoom"/>
15
-  <img src="img/rec.png" alt="" onclick="zoom('img/rec.png')"/>
15
+  <img src="img/rec.png" alt="" onclick="zoom('img/rec.png')" class="zoom"/>
16
16
  </div>
17
17
  ```
18
18
  ```css

3

詳細の変更いたしました 1,5s→1.5s

2021/01/29 05:12

投稿

DrsriN
DrsriN

スコア11

title CHANGED
File without changes
body CHANGED
@@ -58,7 +58,7 @@
58
58
  ```
59
59
  ```js
60
60
  document.querySelector(".slide").addEventListener("click" , function(){
61
- document.querySelector(".zoom").style.animation='1,5s ease zoom'
61
+ document.querySelector(".zoom").style.animation='1.5s ease zoom'
62
62
  })
63
63
  ```
64
64
  現状

2

タイトル変更

2021/01/29 03:54

投稿

DrsriN
DrsriN

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- スライドクリック拡大する機能をつけるには?
1
+ スライドクリックすると拡大する機能をつけるには?
body CHANGED
File without changes

1

タイトルの変更

2021/01/29 02:49

投稿

DrsriN
DrsriN

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- スライドを適応させている画像画像拡大機能(js)が効かない
1
+ スライドにクリックで拡大する機能をつけるには?
body CHANGED
File without changes