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

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

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

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

437閲覧

jQuery : Slickのサムネイルスライダーが意図通りに機能しない

innjera

総合スコア132

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/03/14 08:08

Ruby on Rails 5内にてjQueryを利用しています。

有名なSlickを利用しており、サムネイルをスライダーと連動させて動かしたいです。
それ自体は機能しているのですが、サムネイルがループ(回転)しない(1枚目が3枚目の後に表示ない)という問題に遭遇しています。

Slicker : http://kenwheeler.github.io/slick/

参考サイト;https://blanks.site/post/post37.html

javaScript

1$(document).on("turbolinks:load", function(){ 2 var mainSlider = "#slider"; //メインスライダーid 3 var thumbnailSlider = "#thumbnail_slider" //サムネイルスライダーid 4 $(mainSlider).slick({ 5 autoplay: false, 6 speed: 800, 7 prevArrow: '<button class="slide-arrow prev-arrow"></button>', 8 nextArrow: '<button class="slide-arrow next-arrow"></button>', 9 arrows: false, 10 asNavFor: thumbnailSlider //サムネイルのクラス名 11 }); 12 $(thumbnailSlider).slick({ 13 slidesToShow: 3, 14 speed: 800, 15 infinite: true, 16 asNavFor: mainSlider 17 }); 18 $(thumbnailSlider + " .slick-slide").on('click',function(){ 19 var index = $(this).attr("data-slick-index"); 20 $(thumbnailSlider).slick("slickGoTo",index,false); 21 }); 22});

html

1<div id="wrap"> 2 <ul id="slider" class="pl-0"> 3 <li class="slide-item"> 4 <%= image_tag("parts_example.JPG", alt: "parts_example")%> 5 </li> 6 <li class="slide-item"> 7 <%= image_tag("parts_example_2.JPG", alt: "parts_example")%> 8 </li> 9 <li class="slide-item"> 10 <%= image_tag("parts_example_3.JPG", alt: "parts_example")%> 11 </li> 12 </ul> 13 <ul id="thumbnail_slider" class="pl-0"> 14 <li class="thumbnail-item"> 15 <%= image_tag("parts_example.JPG", alt: "parts_example")%> 16 </li> 17 <li class="thumbnail-item"> 18 <%= image_tag("parts_example_2.JPG", alt: "parts_example")%> 19 </li> 20 <li class="thumbnail-item"> 21 <%= image_tag("parts_example_3.JPG", alt: "parts_example")%> 22 </li> 23 </ul> 24</div>

具体的には写真の通りです。

イメージ説明
イメージ説明

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問