jQueryで動作するスライダーを
下段にある ● ❍ ❍ を背景に画像を指定して
ボタンを押す事で動作するよう、アレンジして設置していたのですが
───────────────────────────────────────────
※こういうスライダーです
http://kenwheeler.github.io/slick/
(実際に使ってるのは別のjavaScriptで他の方が作られたものです)
───────────────────────────────────────────
元々、CSSだけで描かれた丸の部分に
画像をオン、オフで2枚ずつ使っているのが原因なのか、
更新ボタンを何度も押して更新をしていると、
ボタン画像が出ない事があります
画像の質を下げたら改善するかと思って画質を下げたのですが
それでも出てしまうので、画質が直接な原因ではないと思います
スライドで出てくる画像とワンテンポ遅れて
ボタンが出て来るのでjavaScriptの設定などが原因かもしれません
解決方法が分からず、作業は停止しております。
ご存知の方がいらっしゃいましたら、ご指導のほど
よろしくお願い申し上げます。
A 回答 (1件)
- 最新から表示
- 回答順に表示

No.1
- 回答日時:
こんにちは。
うまくいかないという情報しかないので、原因を突き止めて対処するとしか言いようがありませんが・・・
>スライドで出てくる画像とワンテンポ遅れてボタンが出て来るので~
通常、新しく画像を読み込む際は、サーバーからデータを読み込むので、環境のによっては時間がかかることがあります。
でも、一度読み込めばキャッシュに保存されるので、二度目以降はそのようなことはなくなります。
一度目も素早く表示できるように、使用する画像データを、見えないところで最初に全て読み込んでおくという方法はありますが、それが原因というわけではなさそうな雰囲気ですね。
(「プレロード 画像」などをキーに検索すると見つかるでしょう)
具体例が、ご提示のslickしかありませんので、それを例にしてみるなら・・・
>元々、CSSだけで描かれた丸の部分に画像をオン、
>オフで2枚ずつ使っているのが~~
感じとしてはサムネイルのようなインデックスがあって、それを操作することでメインの画像が変わるようなものなのでしょうか?
slickのデモのslider syncingの例が、似たようなことを行っています。二つのスライダを連動させているようですので、方法は同じではないかもしれませんが、これを利用することでも同様の結果を得られるのではないでしょうか?
>画像をオン、オフで2枚ずつ使っている~~
多分、メインに表示中の画像に対応するものをハイライト表示のようなことをしているのかと想像します。
ドット形のマーカが、ハイライトとそうでないものと2種類なのか、サムネイルそれぞれにハイライト時の画像を用意しているのかわかりませんが、slickではスライド変更時のイベントを取得できるようになっているようですので、表示中のサムネイルにクラス設定などをすることで比較的簡単に実現出来ると思われます。
(slickでもハイライト表示可能なので、すでにクラスが設定されているかもしれませんね)
英語がサッパリなので、説明をろくに見てはいませんが、ドット部分に関してもいろいろな指定が可能なようなので、わざわざ連動させるまでもなく実現できるのかもしれません。
一方で、サムネイル形式のスライダーは数多く作成されており、ハイライト表示に対応しているものも多いです。
そのようなものを利用することで、CSSだけをうまく設定してあげれば実現できるような気もします。
質問者様がご利用のスクリプトがどのようなものなのか全くわかりませんが、ご自身で修正不可能な場合は、作者さんあるいは内容を理解できる方に見てもらって修正するか、他の完成されているライブラリに切り替えて、そちらを利用なさるのが宜しいように思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 ノートPCの「アップデートナビ」画面について 1 2023/07/04 21:27
- モニター・ディスプレイ Displayport接続時にディスプレイ設定の一部の項目がチラついて変更できない 3 2022/07/31 10:06
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- バイク車検・修理・メンテナンス アドレス125。セルがか、カチっとも鳴らない。スターターリレーはコツンも鳴らない。 1 2022/08/07 21:11
- Windows 10 再起動後 Pinが使用できず、PC(windows11)にサインインできない 3 2022/08/30 20:53
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- iPhone(アイフォーン) iPhone8使ってますか時々電源が勝手にオフになりますゲームなどしてる時、ホームボタン、電源ボタン 1 2023/02/23 03:44
- プリンタ・スキャナー 【至急】EPSON EP-808AB プリンターUSBメモリーが反応しない 3 2022/06/12 01:13
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景画像の繰り返しについて
-
uwscについての質問です。 画面...
-
ローカルで動くページがサーバ...
-
画像のビット数を変更する方法
-
UWSC 画像判定と条件分岐について
-
ImageMagickでgif画像の一部が...
-
画像の最新表示の自動化
-
「using Windows」でエラーが出る
-
EXCEL VBA 複数のImageコントロ...
-
Excel ユーザーフォームで表示...
-
UWSC 画像認識で条件分岐
-
同じ画像を複数回表示させる
-
ペットボトルがあるかどうか。
-
マスク画像の自動作成
-
2値画像の一致度判定プログラム...
-
uwcs のマクロで画像認識をして...
-
【EXCEL VBA】ダブルクリックで...
-
openCVを用いた手形認識
-
Word VBAでリンクの設定
-
c 画像の一致を調べる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
背景画像の繰り返しについて
-
EXCEL VBA 複数のImageコントロ...
-
【EXCEL VBA】ダブルクリックで...
-
uwcs のマクロで画像認識をして...
-
UWSCの画像認識と条件分岐につ...
-
UWSCでループ処理がうまくいき...
-
vb.net 画像の透過について
-
「using Windows」でエラーが出る
-
Excel ユーザーフォームで表示...
-
UWSC 画像判定と条件分岐について
-
uwscの画像認識に失敗します。
-
画像のビット数を変更する方法
-
jqueryスライダーを2段でスライ...
-
画像処理したBitmapをピクチャ...
-
UWSCの色判定
-
UWSCについて
-
スマホでサイトの画像を長押し→...
-
VBAのユーザーフォームのイメー...
-
gif 画像上の ボタンに リン...
-
画像のピクセルデータの取得
おすすめ情報
