問題タブ [slick.js]

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

友人から、Ken Wheeler の Slick カルーセルを使うように勧められたので、試してみることにしました。私はそれにいくつかの問題を抱えています。1 つ目は、スライドが本来のように「重ねて」読み込まれないことです。それらは垂直に積み重ねられます。最初のスライドがフェード インするときは正しい位置にありますが、2 番目のスライドがフェード インするときは、最初のスライドがあった位置よりも下になります。また、最初のスライドでは右の境界線が切り取られ、2 番目のスライドでは左の境界線以外のすべてが切り取られていることに注意してください。

2 つ目の問題は、スライドの幅や高さを変更できないように見えることです。それらはすべて同じ寸法になります。(それらは、「注目の」クラスの css ファイルに設定されています。)

私は何を間違っていますか？

Slick カルーセルhttp://kenwheeler.github.io/slick/を使用していくつかのビデオを表示しています。ボタンをクリックして、カルーセルを含む非表示の div を表示すると、ビデオが重なっています。レンダリングの問題があると思います。私は何を間違っていますか？ありがとう

これは私のコードです

長い間、遅延読み込みをサポートするシンプルなスライドショー/ギャラリー プラグインを探していましたが、今日Slickに出会いました。

しかし、Slick のサイトは、初心者を基本的な実装に誘導するのではなく、プラグインのすべての力を示すことに重点を置いています。そして、提供された段階的な手順に従いましたが、実際には実装できませんでした。

マークアップをできる限り単純化して、何も悪いことをしていないことを確信できるようにしました。

使用する画像のセットがないため、IMGUr でホストされているランダムなアルバムからいくつかを選びましたが、この構造は、「マニュアル」で説明されているコード フラグメントが意図したとおりには機能しません。

たとえば、ナビゲーションの矢印が表示されません。Chrome Element Inspector を使用して、成功せずに配置されている場所を確認するために、境界線を追加しました。

いくつかの情報を掘り下げた後、「マニュアル」で狙ったもの以外のコードから、ドット: trueと小さな基本的なナビゲーションが表示されました。ついに働き始めましたが、私が望んでいた方法ではありませんでした。

また、私のキーボードは何もしません。後で、accessibility: trueが有効になることがわかりました。

しかし、一般的に、実装は必要以上に困難です。非公式のマニュアルとして機能している別のサイト、または何十もの例を投げて、すべての API オプションをテストすることで誰もがどのように動作するかを理解できるようにするよりも、より良い方法で使用法を説明しているサイトはありますか?

最近、プロジェクトにSlick カルーセルを追加しました。

そこのドキュメントを読んで、メソッドslick Prev()とslick Next().

しかし、私はこの方法をどのように使用するかを尋ねています。私はこれを長い間試してきましたが、実際には でこれを使用する方法を理解できませんhtml button。

私はこの方法を試しました。

AngularJSアプリケーションの 1 つでSlickカルーセルを使用しています。そのために、次のようにディレクティブを作成しました。

ビューファイルのコードは次のとおりです。

この場合、正常に動作し、適切に初期化されています。

しかし、ngRepeatを使用して動的にスライドを作成すると、初期化されず、スライドが次々と表示されます。

これがngRepeatを使用した私のコードです

任意の提案、どうすれば解決できますか?

私のサイトには滑らかなスライダーがあり、それが機能しています。

カルーセルがレンダリングされるときに、各アイテムにカスタム クラスを追加する必要があります。

例: これはフクロウのカルーセルで行われるものです

ここで次の jQuery を使用する場合: http://codepen.io/OwlFonk/pen/dpjhB

あなたは私が必要なものを見ることができるでしょう。

Slickで動作するようには見えません。

Owl ではなく Slick を使用する理由は、Owl には無限スクロールがなく、Owl 2 はバグが多すぎるためです。

上記と同じことができる場合は、Owl 2 の使用を検討しますが、スクリプトが大幅に変更されたため、動作させることができません。

画像のギャラリーもあるニュース記事ページに取り組んでいます。ギャラリーのサムネイルには滑らかなスライダーを使用しています。ギャラリー内のすべての画像には、our-url.com/category/articlewithgallery/1、2、または 3 などのように、広告ビュー用の独自の URL があります (あまり良くありませんが、私にはどうすることもできません)。

次のようなレスポンシブ ブレークポイントを使用しています。

これは正常に機能しています。しかし、多くの URL があるため、現在読み込まれている画像からサムネイルを開始したいと考えています。これを追加することでこれを達成できます：

サムネイルは正しい位置から始まりますが、カルーセルが壊れます。たとえば、もう後方にスクロールすることはできません。ドラッグして、その方向にさらにサムネイルがあることを確認できますが、(新しい) 開始位置に跳ね返ります。また、最後の「スライド」を表示している場合は、それらがまったく表示されないか、すべてのサムネイルの後に空白が追加されます。

滑らかなスライダーの「onInit」関数を使用していないため、初期化などの前にこのスライドに移動するように指示しているため、混乱している可能性があると思いました。私はあらゆる種類のものを試しましたが、 onInit: function() のものを動作させることができませんでした。

私がjavascriptが苦手だからかもしれません。

初めて滑らかなスライダーを実装しようとしていますが、機能していません。コンソールにエラーは表示されません。提供されるデモでは、各スライドの div に開始時に次の属性が与えられます。

しかし、私のスライダーでは、これらの属性が指定されておらず、何も起こりません。以下は私のコードです：