ジャバスクリプトのトラブル解決方法

jQueryで動作するスライダーを
下段にある ● ❍ ❍ を背景に画像を指定して
ボタンを押す事で動作するよう、アレンジして設置していたのですが

───────────────────────────────────────────
※こういうスライダーです
http://kenwheeler.github.io/slick/
（実際に使ってるのは別のjavaScriptで他の方が作られたものです）
───────────────────────────────────────────
元々、CSSだけで描かれた丸の部分に
画像をオン、オフで２枚ずつ使っているのが原因なのか、
更新ボタンを何度も押して更新をしていると、
ボタン画像が出ない事があります

画像の質を下げたら改善するかと思って画質を下げたのですが
それでも出てしまうので、画質が直接な原因ではないと思います

スライドで出てくる画像とワンテンポ遅れて
ボタンが出て来るのでjavaScriptの設定などが原因かもしれません

解決方法が分からず、作業は停止しております。
ご存知の方がいらっしゃいましたら、ご指導のほど
よろしくお願い申し上げます。

No.1 回答者： fujillin 回答日時： 2017/04/15 14:18

こんにちは。

うまくいかないという情報しかないので、原因を突き止めて対処するとしか言いようがありませんが・・・

＞スライドで出てくる画像とワンテンポ遅れてボタンが出て来るので～
通常、新しく画像を読み込む際は、サーバーからデータを読み込むので、環境のによっては時間がかかることがあります。
でも、一度読み込めばキャッシュに保存されるので、二度目以降はそのようなことはなくなります。
一度目も素早く表示できるように、使用する画像データを、見えないところで最初に全て読み込んでおくという方法はありますが、それが原因というわけではなさそうな雰囲気ですね。
(「プレロード 画像」などをキーに検索すると見つかるでしょう)

具体例が、ご提示のslickしかありませんので、それを例にしてみるなら・・・
＞元々、CSSだけで描かれた丸の部分に画像をオン、
＞オフで２枚ずつ使っているのが～～
感じとしてはサムネイルのようなインデックスがあって、それを操作することでメインの画像が変わるようなものなのでしょうか？
slickのデモのslider syncingの例が、似たようなことを行っています。二つのスライダを連動させているようですので、方法は同じではないかもしれませんが、これを利用することでも同様の結果を得られるのではないでしょうか？

＞画像をオン、オフで２枚ずつ使っている～～
多分、メインに表示中の画像に対応するものをハイライト表示のようなことをしているのかと想像します。
ドット形のマーカが、ハイライトとそうでないものと2種類なのか、サムネイルそれぞれにハイライト時の画像を用意しているのかわかりませんが、slickではスライド変更時のイベントを取得できるようになっているようですので、表示中のサムネイルにクラス設定などをすることで比較的簡単に実現出来ると思われます。
（slickでもハイライト表示可能なので、すでにクラスが設定されているかもしれませんね）
英語がサッパリなので、説明をろくに見てはいませんが、ドット部分に関してもいろいろな指定が可能なようなので、わざわざ連動させるまでもなく実現できるのかもしれません。

一方で、サムネイル形式のスライダーは数多く作成されており、ハイライト表示に対応しているものも多いです。
そのようなものを利用することで、CSSだけをうまく設定してあげれば実現できるような気もします。
質問者様がご利用のスクリプトがどのようなものなのか全くわかりませんが、ご自身で修正不可能な場合は、作者さんあるいは内容を理解できる方に見てもらって修正するか、他の完成されているライブラリに切り替えて、そちらを利用なさるのが宜しいように思います。