Elementorを使用してWordPressでスライドをランダム化する方法

Elementorは、訪問者にとってWebサイトの見栄えを良くするために、さまざまなクリエイティブオプションを提供しています。 スライダーとカルーセルは、WordPressユーザーがWebサイトをより高度に見せるために組み込んだいくつかの方法です。

スライダーは一連のスライドで構成されており、Webサイトに表示されると、同じ順序で何度も繰り返されます。 このチュートリアルでは、 Elementorを使用してWordPressでスライドをランダム化する方法を理解します。

ElementorSliderでスライドをランダム化する方法

まず、以下のコードを貼り付けるHTMLブロックを追加します。

以前に作成したHTMLブロックに貼り付ける必要のあるコードは次のとおりです。

>script/script

Webサイトに複数のスライダーがある場合は、読み続けてください。 それを除けば、すべてが良いはずです。

1つまたは複数のスライダーのスライドをランダム化する方法

コードのこの行を変更し、クラス名FirstSliderを付けます。

document.querySelector('.elementor-slides');
// change it to
document.querySelector('.slider1 .elementor-slides');

ページ上の追加のElementorSliderをランダムにする場合は、コードをコピーしてクラス名を変更し、それらに個別のクラス名を付けます。

次に、ランダム化する各スライダーコンポーネントの直後に、コードをコピーしてHTML要素に貼り付けます。

最後に、同じコード行の対応するHTML要素の真上にあるスライダーと一致するようにクラス名を変更します。

たとえば、この行は、Webサイトの3番目のスライダーに使用される場合があります。

document.querySelector('.slider3 .elementor-slides');

それでおしまい。 すべてがうまくいけば、ランダム化されたElementorSliderを楽しむことができます。 ぜひご参加ください FacebookとTwitterは、チュートリアルを見逃すことはありません。