itB!HatenaCopy画像のスライドをやろうと思ってslickというJavascriptを導入しました。様々な参考サイトを拝見して真似をしようとしてもうまくいきませんでした。ソースコード全文が掲載されてなくて、どこにJavascriptを置くのか、htmlファイルのどこに書けば良いのかわからず半日費やしました。実現することができました。ここではslickを使って画像スライドをするために、また様々な表示の失敗とその解決策を自身の備忘録として忘れないうちに記しておきます。思ったらRailsに乗せたら動かなかったよ..slickを導入するための流れ1.slickの公式ページから一式をダウンロード2.ダウンロードしたファイルを解凍3.不要ファイルを削除4.表示するためのhtmlファイルを用意、画像を用意5.ブラウザで表示このような流れで進めていきます。now」をクリックダウンロードしたファイルを解凍。このslickというフォルダを使います。slickフォルダ以外に見えてるファイルは消しても構わない。slickフォルダの中を見てみると以下のようなファイルが見えます。黄色のファイルは使うので残して、それ以外のファイルは不要なので削除しました。空のテキストファイルを新規作成しindex.htmlという名前にします。imagesフォルダを作成してスライドショーをするための画像を入れておきました。先にindex.htmlソースコード全文を乗せます。説明は僕ができる範囲でします。Javascriptあまり知らないので。最終的にこのようにしてスライドショーが出来ました。画像を表示させる部分、上のソースコードで言えばココ。ulタグをdivタグで囲ってあげて、divタグの横幅を600pxに狭めたら幅広にならなくなりました。ここは本番ではちゃんと外部CSSでやったほうが良いでしょう。画面幅が広くなっちゃって直らないと思ったらdivで囲ってあげたらうまくいくかもしれません。src="./images/hoge4.jpg"></li></ul></div>左右の矢印が出ない対処これはslick-theme.cssというファイルを修正して直りました。以下の該当箇所でleftの値とrightの値を微調整して画面内に収まるようにしていけば良いと思います。あとz-indexを指定して最前面に出すようにしたら矢印が出ました。/*ここ修正した*/}文字化けするようになったせっかく矢印と下ボタンが出るようになったと思ったら文字化けしやがりました。先程のslick-theme.cssというファイルを修正して保存したタイミングで文字コードがおかしくなったのが原因でした。僕の環境だと文字コードをUTF8にして保存しなおしたら直りました。サーバーにアップロードすると効かない自分が普段借りているレンタルサーバーにtestフォルダを作り、全てのファイルをアップロードしてブラウザでアクセスしてみたら横並びのスライドになりません。縦に並んでやがるぜ!画面右側に何か出てた。httpsドメインなのに、アップロードしたファイルのどこかでhttpを使ってるんじゃないかと思って。jqueryを読み込む部分をhttp:を外してあげたらよくなった。src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>こんな感じで紆余曲折を経てなんとかスライドが出来るようになりました。思ったらRailsに乗せたら動かなかったよ..画像が縦にずらずらと並ぶような格好になってしまって駄目でした。headタグの中をこの順番で書いたら動くようになりました。</head>と、思ったら別の問題が。このslickを使ったページにアクセスすると、何故かアクセスした瞬間に画面下部まで勝手に移動します。(汗この問題が未だ解決せず。外部のライブラリ使ったり、Rails使ったりしてると問題が起こった時に対処することができないですねぇ。どこで問題が起こってるのか..Chromeのデバッガを使っても異変が起きてるのはslickの内部だからわからんわ。Village」でインタビューさせていただきました!新着記事プログラミング入門の5ステップとスタートダッシュに使えるサイト&アプリ「プログラミングをやってみたい」「やってみよう」と思ったらその気持ちが大事です。...インフラエンジニアの仕事内容、キャリア、未経験転職の方法ども。元SEでインフラまわりもやったことがあるので自分のわかる範囲で。...ネットワークエンジニアは「楽」と「きつい」が同居する仕事ネットワークエンジニアの方にヒアリングしたことがあります。TOPグループサイト|Happiant。