ECステーションのスライドバナー

Question

初めてECステーションのスライドバナーを作成しました。
商品ページのヘッダーに設置したのですが、画像にはフチをつけていないのですが、ページだと画像の周りに写真のような白・グレーのフチがついてしまいます。
この白・グレーのフチを消したいのでECステーションさんへ問い合わせたところ、仕様上出来ないとの返答でした。
どうにかしてこれを消す方法、また何かのタグ等を追加して消すことができないのでしょうか？

また出来ない場合、ＥＣステーションさん以外でスライドバナーを作るツールは無いでしょうか？
ヘッダーだけなのでできれば無料のツールがあると良いのですが。
どうぞよろしくお願いいたします！

ヘッダーのソースはこれです。
▼▼▼






























■当店を装った偽サイトにご注意ください■　





■当店はご注文からひとつひとつお作りしています。お届けまでお時間をいただいています（※詳細は各ページをご確認ください）■

Answer

ECマスターズの三輪です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの三輪です。

> この白・グレーのフチを消したいのでECステーションさんへ問い合わせたところ、
> 仕様上出来ないとの返答でした。
> どうにかしてこれを消す方法、また何かのタグ等を追加して消すことができないのでしょうか？

残念ながら、
ECステーションでは、フチを消すことはできかねます。

> また出来ない場合、ＥＣステーションさん以外でスライドバナーを作るツールは無いでしょうか？

以下の記事を参考にしていただけますと幸いです。

横幅いっぱい画像の楽天PCヘッダースライダー5枚
https://bit.ly/3L7Oair

何卒よろしくお願い致します。

Answer

先日はありがとうございました。
早速▼
https://bit.ly/3L7Oair
横幅指定の画像の楽天PCヘッダースライダー5枚
を見ながらヘッダーを作りました。
スライド部分は出来たのですが…
テスト画面でプレビューしたら
ヘッダーと次の部分の間に大きな隙間が出来てしまいます。
画像）（巾1000px）に高さを入れたりもしましたがどうにも直りません。
どうしたらよいか分からないのでどうか教えてください。

▼作ったヘッダー（test）内容▼


























スクロール追従バナーです




































■当店を装った偽サイトにご注意ください■　





■当店はご注文からひとつひとつお作りしています。お届けまでお時間をいただいています（※詳細は各ページをご確認ください）■
###HR######IMG06e3d22a8ececcc46ef71f2bc19634bd6.jpegIMG0###

Answer

ECマスターズの三輪です。

> テスト画面でプレビューしたら
> ヘッダーと次の部分の間に大きな隙間が出来てしまいます。
> 画像）（巾1000px）に高さを入れたりもしましたがどうにも直りません。
> どうしたらよいか分からないのでどうか教えてください。

恐れ入りますが、動作確認のため
弊社に登録されている会員情報をもとに
min様のRMSにログインさせて頂いてもよろしいでしょうか。

Answer

もちろん良いです！
お願いします！！

ヘッダー・フッター・レフトナビのtestで作ってます。

Answer

ECマスターズの三輪です。

> テスト画面でプレビューしたら
> ヘッダーと次の部分の間に大きな隙間が出来てしまいます。
> 画像）（巾1000px）に高さを入れたりもしましたがどうにも直りません。
> どうしたらよいか分からないのでどうか教えてください。

.slider ul{
  display:block;
  width:100%;
  height:100vh;
  position: relative;
  overflow:hidden;
  padding:0;
  margin:0 auto;

}

のソースコードの一部を修正したところ
大きな隙間を解消することができました。

height:100vh;
　　↓
height:30vh;

お手数ですが
確認のほど、よろしくお願い致します。

Answer

ありがとうございました！
height:100vh;
これが高さなのですね。
大幅に少なくなったので…画像の高さで height:200px; にしたら解消しました。
ありがとうございました。
とても助かりました。

Answer

完了にしてしまってから申し訳ないのですが、
バナーの一枚当たりの表示時間はいいのですが、左に動くときの速さを少しゆっくりしたいといった場合、どこをいじったらよいでしょうか。
何度もすみませんがよろしくお願いします。

Answer

ECマスターズの三輪です。

> バナーの一枚当たりの表示時間はいいのですが、
> 左に動くときの速さを少しゆっくりしたいといった場合、
> どこをいじったらよいでしょうか。

画像ごとに左右の数値で速さを調整する必要がございます。
一定数ごとに数字を増やす必要がございます。
今回、スライドの動きを少しゆっくりになるよう調整しましたので、

【現状のソースコード】
　↓　↓　↓
【貼り付けソースコード】

に修正いただき動作確認をお願い致します。

例）animation:slide 20s 0s infinite;
----------------------------------------------------------
　↓　↓　↓
例）animation:slide 30s 0s infinite;
----------------------------------------------------------

【現状のソースコード】

.slider li:nth-of-type(1){
  transform:translateX(0);
  animation:slide 20s 0s infinite;
}
.slider li:nth-of-type(2){
  animation:slide 20s 4s infinite;
}
.slider li:nth-of-type(3){
  animation:slide 20s 8s infinite;
}
.slider li:nth-of-type(4){
  animation:slide 20s 12s infinite;
}
.slider li:nth-of-type(5){
  animation:slide 20s 16s infinite;
}

----------------------------------------------------------
↓　↓　↓

【貼り付けソースコード】

.slider li:nth-of-type(1){
  transform:translateX(0);
  animation:slide 30s 0s infinite;
}
.slider li:nth-of-type(2){
  animation:slide 30s 6s infinite;
}
.slider li:nth-of-type(3){
  animation:slide 30s 12s infinite;
}
.slider li:nth-of-type(4){
  animation:slide 30s 18s infinite;
}
.slider li:nth-of-type(5){
  animation:slide 30s 24s infinite;
}

Answer

ありがとうございます。
速さを少し抑えられたので、ページがゆったりとした雰囲気になりました！
何回もすみませんでした。
今後ともよろしくお願いいたします。