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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

1回答

2066閲覧

スライダーを滑らかにする方法を教えてください。

tyonomi

総合スコア11

JavaScript

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

0グッド

0クリップ

投稿2018/02/12 13:33

スライダーを入れているのですが
動きをもっと滑らかにするにはどうしたらよろしいでしょうか。

$(document).ready(function(){ $('.slide').slick({ accessibility: true, autoplay: true, autoplaySpeed: 3000, pauseOnDotsHover: false, arrows: false, infinite: true, slidesToShow: 3, centerMode: true, dots: false, centerPadding: '5%' });

何卒よろしくお願いいたします。

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

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

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

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

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

jun68ykt

2018/02/12 13:40

このプラグイン http://kenwheeler.github.io/slick/ を使われているのだと思いますが、現状出来ているものを jsFiddle か何かに挙げて、今どのような動きをするのか実際に見させて頂くことは可能でしょうか?
tyonomi

2018/02/12 13:42

ご回答ありがとうございます!機密情報のものなので全ては無理なのですがお見せするいい方法はございますでしょうか。
jun68ykt

2018/02/12 14:00 編集

何らかの業務のWEBサイトのいずれかのページにスライダーがあるのだと思いますが、そのスライダーを含む div だったり ul だったりだけを切り取って(コピペして)、さらに機密情報がない状態、つまり、具体的な商品画像とか、人名などのテキストをダミーのものにして JSFiddle か CodePen に上げて頂けるとよろしいかと思います。動きを "もっと" 滑らかにする方法を考えるには、現状どう動くのかを回答者が見ることができれば、確実な回答を望めるのではと思った次第です。
tyonomi

2018/02/12 14:00

ありがとうございます。かしこまりました!こちら使い方がいまいちわからなかったのですがurlあげればよろしいでしょうか
tyonomi

2018/02/12 14:01

一応url取得いたしました!
jun68ykt

2018/02/12 14:07

はい。jsFiddle か CodePen に今の動きを再現できるものが作れたらそれを保存して、url を質問に追記すればOKです。jQueryなどを使った、特に動きのあるUIについてこちらで質問される際には、JSFiddle かCodePenで上げれば、回答者のほうでは、それをそのまま Fork して修正したりできて、確度の高い回答が望めますので、少し使い方を調べてみることをオススメします。
tyonomi

2018/02/12 14:08

このような感じでよろしいでしょうか。ご丁寧なご回答ありがとうございます!
jun68ykt

2018/02/12 14:10

あ、早いですね。こんな感じで OKです。ちょっと見させてください。
tyonomi

2018/02/12 14:10

何卒よろしくお願いいたします!
jun68ykt

2018/02/12 15:13 編集

作成いただいたものを fork して私のほうで手を入れて、とりあえず各スライドっぽいものが動くようにしたものがこれです。https://jsfiddle.net/jun68ykt/xhjd2s3t/2/ 画像がないので単なる div に色をつけただけのものですが、今現在これと同じような移動の仕方(タイミング、止まり方など)をしているということでよいですか?
jun68ykt

2018/02/12 15:16

それと、「このサイトのこのカルーセルと同じような感じの動きにしたい」みたいな、お手本になるものがあれば、それも教えてください。
tyonomi

2018/02/12 15:22

ありがとうございます。そうです!このまま同じ動きです!お手をかけていただきありがとうございます。
tyonomi

2018/02/12 15:25

とりあえず先方にはもう少し滑らかに・・・ということしかなく、これより滑らかになれば・・・と思っておりまして・・・
tyonomi

2018/02/12 15:26

自分なりにも探しているところです。すいません漠然としていまして
tyonomi

2018/02/12 15:28

おそらくこのページの「スゥ~~~」版を求めているかもしれません。
jun68ykt

2018/02/12 15:30

なるほど。これもslick使っているようですね。ちょっと見てみます。
jun68ykt

2018/02/12 15:33

「スゥ~~~」 の設定を写したものを回答に書きましたが、これではダメですかね〜
tyonomi

2018/02/12 15:34

拝見しました!めちゃくちゃいいです!!
tyonomi

2018/02/12 15:34

こちらで出してみます!
jun68ykt

2018/02/12 15:35

すいませんこちらが近いかもしれません! ← のほうは、もう少し、凝った動きですね。ちょっと見ます。
guest

回答1

0

ベストアンサー

こんばんわ。

これでどうでしょうか?

https://jsfiddle.net/jun68ykt/xhjd2s3t/3/


追記

ポイントは、以下の2つのパラメータです。

javascript

1 cssEase: 'linear', 2 speed: 5000,

特に、これの cssEase を以下にあるいずれかを選ぶと動きの効果が変わります。

http://easings.net/ja

linear だと等速で移動します。
cssEase と、speed をいろいろ変えたバリエーションを持って行って
お客さんに選んでもらうと、いいかもしれませんね。

投稿2018/02/12 15:32

編集2018/02/12 16:28
jun68ykt

総合スコア9058

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

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

tyonomi

2018/02/12 15:36

本当に本当にありがとうございます!
tyonomi

2018/02/12 15:42

実装できました! バリエーションの仕方も教えていただき感謝です! ありがとうございます!
jun68ykt

2018/02/12 15:42

追記もご確認ください。よい提案ができることをお祈り申し上げます。
tyonomi

2018/02/12 15:48

また是非ともお力になっていただきたいと思いました。今回とても勉強になりました。 ありがとうございました。
jun68ykt

2018/02/12 16:23

どうもです。 後から見直してみたんですが、 申し訳ありませんが、追記に、 > cssEase を以下にあるいずれかを選ぶと動きの効果が変わります。 > > http://easings.net/ja と書いたのは私の早合点で、間違いだったかもしれません。 > http://easings.net/ja の中のどれかの動きを実現しようとして、ご自身でいろいろやって うまくいかなかったら、また別途、質問を投げてみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問