Diviモジュールのクリック可能なカルーセルを作成する方法
公開: 2017-09-19今日の投稿は、「DiviKitchen」の本拠地であるDiviSoupのMichelleNunanによって提出されました。彼女は、新しくて便利なDiviチュートリアルとecoursesを絶えず調理しています。
カルーセルは、人気のあるWebサイト機能です。 それらはあなたが余分なスペースをとることなくより多くのコンテンツを表示することを可能にし、またあなたの訪問者があなたのコンテンツにより多く関与することを奨励することができるあなたのウェブサイトに双方向性の要素を追加します。
カルーセルでコンテンツを表示するのに役立つ優れたプラグインはたくさんありますが、この投稿では、CSSとJavascriptのみを使用してDiviモジュールのクリック可能なカルーセルを作成する方法を紹介します。
このエフェクトは、ほとんどすべての標準Diviモジュール、またはモジュールの組み合わせで使用できます。 画像モジュールを使用してこのカルーセルを作成する方法を紹介します。次に、このプロセスが少し異なるため、ブログモジュールを使用します。 そこから、ほとんどすべての標準モジュールを使用して独自のカルーセルを作成する方法を理解する必要があります。
結果
これは、ブログモジュールでカルーセルを作成した後に最終的に得られるものです。
さまざまなDiviBuilderモジュールを使用した効果を示すライブデモをここで見ることができます。
それでは始めましょう。
新しいページを追加する
まず、画像モジュールを使用してカルーセルを作成します。 新しいページを追加するか、カルーセルを追加するページを開きます。
新しいセクションを追加する
1つの列でページに新しい標準セクションを追加します。 次に、セクション設定を開き、[詳細設定]タブで、[CSSクラス]フィールドにクラスds-carousel-sectionを追加します。
セクションと行の表示方法を変更するため、これらの変更のみをカルーセルに適用する必要があるため、コードがサイトの他の要素に影響を与えないようにカスタムクラスを追加します。
次に、セクションを保存して終了します。
次に、行の設定を開き、[詳細設定]タブで、[CSSクラス]フィールドにクラスds-carousel-rowを追加します。 次に、行を保存して終了します。
次に、画像モジュールを行に追加します。 [モジュールの挿入]をクリックして、リストからイメージモジュールを選択します。
画像モジュールの[コンテンツ]タブで、[画像のアップロード]をクリックし、メディアライブラリから目的の画像を選択するか、新しい画像をアップロードします。
画像をライトボックスで開く場合は、設定でこのオプションを選択します。
または、必要に応じて、画像をクリックしたときにURLを追加して新しいページを開くこともできます。
モジュールに対して最後に行う必要があるのは、クラスを追加することです。 [詳細設定]タブをクリックし、[CSSクラス]フィールドにクラスds-carousel-moduleを追加します。 次に、モジュールを保存して終了します。
これは完了したモジュールの1つですが、カルーセルを作成するには複数の画像が必要になります。 この投稿の後半で提供するコードでは、一度に5つの画像が表示されるため、カルーセルボタンを有効にしてコンテンツをスライドさせるには、少なくとも6つの画像が必要になります。
Diviのクローン機能を使用して、カルーセルに画像を表示する回数だけ画像モジュールを複製します。
完了すると、セクションは次のようになり、画像モジュールが1行に積み上げられます。
各モジュールの設定を開き、画像とURLを追加した場合は交換する必要があります。
これでコンテンツのセットアップが完了しました。次に、ナビゲーションを作成します。
新しいセクションを追加する
画像セクションのすぐ下に新しいセクションを追加します。今回は2列です。
行設定を開き、[詳細設定]タブで、[CSSクラス]フィールドにクラスds-arrow-rowを追加します。 次に、行を保存して終了します。
ナビゲーションを追加する
次に、この行の2つの列のそれぞれにテキストモジュールを追加します。
次に、ナビゲーションボタンとして機能する入力フィールドを作成する必要があります。 左側の列とコンテンツ領域でテキストモジュールを開き、次のHTMLを貼り付けます。
<input id="ds-arrow-left" type="button" value="8">
次に、モジュールを保存して終了します。
次に、右側の列のテキストモジュールを開き、次のHTMLを貼り付けます。
<input id="ds-arrow-right" type="button" value="9">
次に、モジュールを保存して終了します。
これらの入力フィールドにds-arrow-leftとds-arrow-rightの一意のIDを指定しているため、CSSでスタイルを設定し、JavaScriptでターゲットを設定して、クリックしたときに何をしたいかを伝えることができます。
8と9の値は、ETモジュールフォントファミリの左右の二重矢印を示しています。
ビルダーで行う必要があるのはこれだけです。 ここでページのフロントエンドを確認すると、画像の1つの列と、8と9が付いた2つの小さな灰色のボタンになり、何も実行されません。 それでは、コードを追加して、楽しい部分に取り掛かりましょう。
CSSを追加します
次のCSSを子テーマに追加することをお勧めしますが、子テーマを使用していない場合は、Divi>テーマオプション>一般>カスタムCSSに追加し、必ず[保存]をクリックしてください。
/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: 'ETModules';
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}
/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}必要に応じてCSSを編集します
カルーセルで使用するモジュールの数によっては、CSS宣言の一部を編集する必要がある場合があります。
今少し数学のために！
この宣言は、モジュールを含む行の幅を設定します。
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}モジュールを並べて浮かせ、一部を表示領域の外側に配置するには、行の幅を広げる必要があります。
1ページに5つ、合計15のモジュールを表示している場合は、3ページになります。 したがって、行の表示幅は次のようにする必要があります。
（15/5）x 100 = 300。
したがって、1000vwの値を最小の300vwに変更する必要があります。 （JavaScriptが余分な空のページを表示しないように処理するため、より大きな数値を挿入してもかまいません）。 したがって、調整されたCSSは次のようになります。
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}メディアクエリでは、少し異なります。 CSSは、幅1024ピクセル以下の画面ではページごとに3つの画像を表示し、幅479ピクセル以下の画面ではページごとに1つの画像を表示するように構成されているため、次のことを反映するように計算を調整する必要があります。
（15/3）x 100 = 500（タブレットの場合）
（15/1）x 100 = 1500（モバイルの場合）
調整したCSSは次のようになります。
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 500vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1500vw !important;
}
}簡単にするために、これらの値をすべて、使用しているモジュールの総数よりも広い幅に修正することができます。 したがって、前述の例では、その値は1500vw以上になります。
また、ページごとに表示されるモジュールの数を変更することもできます。 このCSS宣言は、それを調整できる場所です。
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
20vwの幅の値は1ページあたり5つの画像を表示し、100のパーセンテージにすぎません。したがって、25vwは1ページあたり4つの画像を表示し、16.66vwは1ページあたり6つの画像を表示します。
メディアクエリについても同じことができます。
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}1ページに表示される画像の数を変更する場合は、前述の行幅の値も調整する必要がある場合があることに注意してください。
ここでもう一度ページを確認すると、すべてが適切にスタイル設定され、カルーセルのように見えるはずですが、ページが機能するためには、JavaScriptを追加する必要があります。
JavaScriptを追加する
次のコードをコピーしてDivi>テーマオプション>統合>ブログの<head>に追加し、必ず保存してください。
<script type="text/javascript">
(function ($) {
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}
function mn_carousel_init() {
mn_set_visible();
var item = $('.ds-carousel-module');
$('#ds-arrow-right').click(function() {
mn_next_slide(item);
});
$('#ds-arrow-left').click(function() {
mn_previous_slide(item);
});
$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});
}
$(document).ready(function() {
mn_carousel_init();
});
})(jQuery)
</script>このコードはボタンに機能を追加し、クリックすると行を左右に移動してモジュールを表示します。
編集したい領域がいくつかあります。
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
mn_visible = 5; 変数は、デスクトップのページごとに表示されるモジュールの数に対応します。 したがって、前述のようにCSSでこれを変更した場合は、この値も変更する必要があります。
同様に、この機能はタブレットや携帯電話に表示される画像の数を調整します。 したがって、CSSでこれを変更した場合は、ここでもmn_visible値を調整してください。
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}最後に、カルーセルが移動する速度があります。 ここでは1000として設定されています。これはミリ秒単位の速度です：1000ミリ秒= 1秒。
この値を調整して、アニメーションの速度を上げたり下げたりすることができます。
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}それでおしまい！ これで、ページを表示すると、クリック可能な画像モジュールのカルーセルが表示されます。
前述したように、この方法はほとんどすべての標準のDivi Builderモジュールで使用できますが、ブログモジュールなど、ある種のフィードを表示するように設計されたモジュールで設定を調整する必要がある場合があります。
ブログモジュールが投稿を取得して複数の列に表示するため（グリッド機能を使用する場合）、モジュール設定と少しの追加CSSを調整する必要があります。
ブログモジュールを使用したカルーセル
同じ手順に従って、セクションと行を設定します。
画像モジュールを追加する代わりに、ブログモジュールを選択し、モジュール設定の[詳細設定]タブでds-carousel-moduleクラスを追加します。
次に、[デザイン]タブで、[レイアウト]ドロップダウンから[グリッド]を選択します。
必要に応じて全幅のままにすることもできますが、[グリッド]オプションを使用すると、カルーセルレイアウトにより適したスタイルが自動的に追加されます。
次に、[コンテンツ]タブでいくつかの設定を調整する必要があります。
この最初のモジュールでは、投稿番号を1に設定し、オフセット番号を0に設定する必要があります。
残りの設定をどのように調整するか、どのコンテンツを表示するかは完全にあなた次第です。 次に、保存して終了します。
以前と同様に、Diviのクローン作成機能を使用して、モジュールを必要な回数だけ複製します。
必要なブログモジュールの数が決まったら、それぞれを開き、オフセット数を1ずつ増やして、各ブログモジュールがフィードに次の投稿を表示するようにします。
したがって、設定は次のようになります。
1番目=オフセット番号：0
2番目=オフセット番号：1
3番目=オフセット番号：2
4番目=オフセット番号：3
NS。
少し余分なCSS
グリッド形式を使用するとブログモジュールが列に表示されるため、この追加のメディアクエリをCSSに追加して、小さい画面でのDiviの列設定を上書きする必要があります。
@media all and (max-width: 980px) {
/*Set post to fullwidth on smaller screens*/
.ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
width: 100% !important;
margin: 0 !important;
}
}ブログモジュールを全幅モードで使用することにした場合は、これを追加する必要はありません。
結果
今あなたのページをチェックして、あなたの素敵な新しいブログカルーセルを見てください
最終的な考え
このカルーセル効果を使用して、ページの長さを増やさずに、より多くのコンテンツを表示する方法はたくさんあります。
サイトのデザイン、クライアントの声、従業員の経歴、ビデオ、ポッドキャスト、さらにはショップの製品のショーケースを表示できます。
このチュートリアルを使用して、クリック可能なDiviモジュールのカルーセルを作成する方法を聞きたいので、以下のセクションにコメントを残してください。
aunaauna /Shutterstock.comによる注目の画像