質問編集履歴

5

不要箇所の削除と少し補足追加

2017/08/10 07:15

投稿

chanNORI
chanNORI

スコア27

title CHANGED
File without changes
body CHANGED
@@ -126,12 +126,10 @@
126
126
  ###試したこと
127
127
  slickが初期化された時に1番目の要素にclass名を付与させようとしましたが、afterChangeのタイミングで付与されました。
128
128
  これをbeforeChangeのタイミングで付与させたいです。
129
+ ※top_slide_onと区別するためにaddClassをtop_slide_firstとしてあります。
129
130
 
130
131
  ```ここに言語を入力
131
132
  $('#top_slide_left').on('init', function(slick){
132
133
  $('#top_slide_left li:first-child').addClass("top_slide_first");
133
134
  });
134
- ```
135
+ ```
135
-
136
- ###補足情報(言語/FW/ツール等のバージョンなど)
137
- より詳細な情報

4

コードを一部修正

2017/08/10 07:15

投稿

chanNORI
chanNORI

スコア27

title CHANGED
File without changes
body CHANGED
@@ -45,7 +45,7 @@
45
45
  $('#top_slide_left').on('afterChange', function(event, slick, currentSlide, nextSlide){
46
46
  $("#top_slide_left li:not(.slick-active)").removeClass("top_slide_on");
47
47
  });
48
- $('#top_slide_left').on('reinit', function(slick){
48
+ $('#top_slide_left').on('init', function(slick){
49
49
  $('#top_slide_left li:first-child').addClass("top_slide_on");
50
50
  });
51
51
  $(document).ready(function(){

3

試したことを追加しました

2017/08/10 07:05

投稿

chanNORI
chanNORI

スコア27

title CHANGED
File without changes
body CHANGED
@@ -121,4 +121,17 @@
121
121
  }
122
122
  }
123
123
  </styles>
124
- ```
124
+ ```
125
+
126
+ ###試したこと
127
+ slickが初期化された時に1番目の要素にclass名を付与させようとしましたが、afterChangeのタイミングで付与されました。
128
+ これをbeforeChangeのタイミングで付与させたいです。
129
+
130
+ ```ここに言語を入力
131
+ $('#top_slide_left').on('init', function(slick){
132
+ $('#top_slide_left li:first-child').addClass("top_slide_first");
133
+ });
134
+ ```
135
+
136
+ ###補足情報(言語/FW/ツール等のバージョンなど)
137
+ より詳細な情報

2

cssを追加いたしました。よろしくお願いいたします。

2017/08/10 07:03

投稿

chanNORI
chanNORI

スコア27

title CHANGED
File without changes
body CHANGED
@@ -64,4 +64,61 @@
64
64
  $("#top_slide_right li:not(.slick-active)").removeClass("top_slide_on");
65
65
  });
66
66
  </script>
67
+
68
+ <styles>
69
+ header .slide {
70
+ display: flex;
71
+ }
72
+ /* line 292, style.scss */
73
+ header .slide li {
74
+ width: 100%;
75
+ background-size: cover;
76
+ background-position: center;
77
+ background-repeat: no-repeat;
78
+ }
79
+ /* line 298, style.scss */
80
+ header .slide .left {
81
+ width: 50%;
82
+ }
83
+ /* line 300, style.scss */
84
+ header .slide .left .slide1 {
85
+ background-image: url(/img/top_main_left1.jpg);
86
+ }
87
+ /* line 303, style.scss */
88
+ header .slide .left .slide2 {
89
+ background-image: url(/img/top_main_left2.jpg);
90
+ }
91
+ /* line 306, style.scss */
92
+ header .slide .left .slide3 {
93
+ background-image: url(/img/top_main_left3.jpg);
94
+ }
95
+ /* line 310, style.scss */
96
+ header .slide .right {
97
+ width: 50%;
98
+ }
99
+ /* line 312, style.scss */
100
+ header .slide .right .slide1 {
101
+ background-image: url(/img/top_main_right1.jpg);
102
+ }
103
+ /* line 315, style.scss */
104
+ header .slide .right .slide2 {
105
+ background-image: url(/img/top_main_right2.jpg);
106
+ }
107
+ /* line 318, style.scss */
108
+ header .slide .right .slide3 {
109
+ background-image: url(/img/top_main_right3.jpg);
110
+ }
111
+ /* line 322, style.scss */
112
+ header .slide .top_slide_on {
113
+ animation: slick-active 10s linear forwards;
114
+ }
115
+ @keyframes slick-active {
116
+ 0% {
117
+ transform: scale(1);
118
+ }
119
+ 100% {
120
+ transform: scale(1.1);
121
+ }
122
+ }
123
+ </styles>
67
124
  ```

1

コードを見やすく

2017/08/10 06:27

投稿

chanNORI
chanNORI

スコア27

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,7 @@
8
8
  ご教示のほどよろしくお願いいたします。
9
9
 
10
10
  ###該当のソースコード
11
+ ```ここに言語を入力
11
12
  <div class="left">
12
13
  <ul id="top_slide_left">
13
14
  <li class="slide1 top_slide_on"></li>
@@ -23,6 +24,7 @@
23
24
  </ul>
24
25
  </div>
25
26
 
27
+
26
28
  <script>
27
29
  //メインイメージスライダー
28
30
  $(document).ready(function(){
@@ -61,4 +63,5 @@
61
63
  $(".slick-active").addClass("top_slide_on");
62
64
  $("#top_slide_right li:not(.slick-active)").removeClass("top_slide_on");
63
65
  });
64
- </script>
66
+ </script>
67
+ ```