自分のサイトの多くの人が見たいスライダーは、画面に1つのコンテンツを表示するブロックであり、一定期間後にこのコンテンツを別のコンテンツに変更します。当然、すべてのWeb開発者は、HTML、CSS、およびJavaScriptを使用してスライダーを個別に作成できますが、これは必ずしも意味があるとは限りません。あなたはかなりの時間を費やしますが、インターネット上にはあなたの生活をはるかに楽にし、あなたのサイトをはるかに魅力的にする既製のソリューションがかなりあります。この記事では、フクロウカルーセルと呼ばれるこれらのソリューションの1つに焦点を当てます。このスライダーの設定は非常に簡単なので、初心者でも操作できます。ここで、このスライダーが何であるか、およびその他の重要な詳細を確認できます。フクロウのカルーセルのセットアップは段階的なプロセスであるため、この資料は順番にのみ学習する必要があります。
それは何ですか、なぜこの特定のスライダーを選択する必要がありますか？
フクロウのカルーセル、その設定はこの記事で検討するのは、ページに美しく便利なスライダーを追加する非常に効果的なプラグインです。これにより、サイトでの作業が大幅に容易になり、時間、労力、およびお金を大幅に節約できます。 Webにはかなりの数のスライダーがあるので、この特定のプラグインの利点は何ですか？実際、このスライダーには、ページを一意で繰り返し不可能にするための多数のカスタマイズオプションが用意されています。これはレスポンシブプラグインであり、すべてのブラウザバージョンで動作し、WordPressやその他の一般的なCMSで簡単に接続できます。一般に、このスライダーには多くの利点があるため、必ず選択する必要があります。ただし、Owl Carouselの構成を開始する前に、このプラグインをダウンロードする必要があります。
ダウンロード
フクロウカルーセル2のセットアップは、それをあなたのコンピュータにダウンロードしました、そしてこれは段階的な指示なので、最初から始める価値があります。したがって、プログラムはパッケージマネージャーを使用してダウンロードできますが、これらは高度な開発者ツールであるため、ここでは、このプラグインを標準的な方法で取得する方法について説明します。プラグインの公式ウェブサイトにアクセスして、最新バージョンをダウンロードする必要があります。その後、ダウンロードしたすべてのファイルをサイトのディレクトリに転送し、プラグイン自体と同じ名前の便利なフォルダを用意する必要があります。このプラグインはjQueryに関連しているため、このライブラリも利用できるようにする必要があることに注意してください。このプラグインをダウンロードするときは、次のステップであるOwl Carousel2スライダーのカスタマイズに取り組む必要があります。
CSS
フクロウカルーセル1。3つの設定は、新しい2番目のバージョンとほぼ同じですが、新しい機能のみが追加されています。ただし、基本的な情報は、ドキュメントにCSSを追加することから始めて同じになります。したがって、最初のステップはHTMLコードに行を追加することです <link rel = "stylesheet" href = "owlcarousel / owl.carousel.min.css">...それはあなたに何を与えますか？これは、スライダーを表示するために必要なスタイルをサイトにロードする行です。この時点で、自分で視覚処理を行うことで終了できます。ただし、より便利で高速なソリューションがあります。行を追加することもできます <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css">デフォルトのテーマもロードしますスライダー。すぐに使用できるようになります。一部のスタイルを編集して、スライダーをよりユニークで珍しいものにしたり、コンテンツにより適したものにしたりすることができます。当然、ロシア語のフクロウカルーセルの設定は非常に便利ですが、サイトを作成するすべての人は、英語の知識がないとできないことを理解する必要があります。
JavaSpript接続
当然、スライダーはJSなしでは機能しません。したがって、必要なコードを含む適切なファイルを含めるように注意する必要もあります。これを行うには、コード行を挿入する必要があります ドキュメントから、 ただし、1つの条件を満たす必要があります。JSはすべてのコマンドを順番に実行するプログラミング言語であることは誰もが知っているので、この場合、jQueryライブラリをドキュメントに追加する行の後にこのコード行を追加する必要があります。このスライダーの場合、JSで他に何もする必要はありません。
HTMLコードのフォーマット
スライダーを接続しました。今度はそれを配置してカスタマイズします。まず、スライダーをページに表示するためのHTMLコードを作成する必要があります。これを行うには、スライドを保持するコンテナを作成する必要があります。これは、フクロウカルーセルクラスを割り当てる必要があるdivタグを使用して実行できます。スライダーに関連するすべてのスタイルがアクティブになることを保証するのはこのクラスです。クラスをもう1つ追加することもできます-owl-theme。デフォルトのデザインを使用する場合、またはスライダーの標準バージョンを今後の作業の基礎として使用する場合に便利です。
次に、各スライドをdivタグ付きの個別のコンテナーに追加する必要があります。もちろん、他のタグを使用することもできますが、このタグはスライダーに最適です。
プラグイン呼び出し
既製のスライダーをサイトに表示するために最後に行う必要があるのは、次のコードブロックを使用することです。
$（ドキュメント）.ready（関数（）{
$（ "。owl-carousel"）。owlCarousel（）;
}）;
スライダーが確実に起動するようにします関数、つまり、ページが読み込まれたときにコンテンツをスクロールします。同じコードで、OwlCarouselをWordPressに接続できます。このプラグインの設定は多種多様であり、今では最も重要なポイントについて知ることができます。
スライダーの外観と機能をカスタマイズする
では、どのコマンドを使用できますか？スライダーをカスタマイズするには？まず、itemsコマンドを覚えておく必要があります。これを使用すると、スライダーで特定の数のスライドを設定できます。 loopコマンドを使用すると、スライダーをループするか、最後の項目でスクロールを停止するかを選択できます。マウスやタッチなどのいくつかのオプションがあるドラッグコマンドもあります。前者の場合は、マウスを押したままスライダーの要素を反転できるようにすることができ、後者の場合は、タッチを使用して行うことができます（このコマンドはモバイルデバイスに適しています）。もう1つの重要なコマンドはnavです。これにより、ナビゲーション矢印を表示できます。これを使用すると、navTextコマンドを使用してナビゲーションボタンにラベルを追加できます。また、ページの読み込み時にスライダースライドの回転の自動開始をオンまたはオフにできる自動再生コマンドを忘れないでください。このコマンドに加えて、autoplayTimeoutを使用することもできます。この場合、各スライドを自動的に反転する間隔を決定する特定の値をミリ秒単位で設定できます。
レスポンシブウェブデザインを使用している場合は、表示されているデバイスに応じてページデザインが自動的に変更される場合は、ページが表示されている画面の幅に応じて表示されるスライドの数を設定できるレスポンシブコマンドについて必ず覚えておく必要があります。
