「スライダー」の検索結果

[石川＠Vektor,Inc.]

VK Blocks のスライダーブロックでダメな理由は何でしょうか？

https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-industry=&pattern-product=&pattern-type=slider&demo-site=&s=&vkfs_form_id=fc550ff3-791b-426b-aeb3-375e7fb39bd8

[愛子石田]

■ WordPress のバージョン
6.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.8.0

■ Pro Unit のバージョン
0.24.0

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.1

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
Master Slider – Responsive Touch Slider
バージョン: 3.8.7

■ 期待する動作
Master Sliderを固定ページにショートコードで貼り付けて表示をさせたい。

■ 自分で試した事
・プラグインを全て削除をしてMaster Sliderのみにしたが稼働しない
・カスタマイズ管理画面ではスライダーが表示されるが公開ページで表示されない
・他のテーマに変更をしたら、表示されるテーマと表示れないテーマがあった

■ 症状が発生するブラウザ
Safari、Chrome、Edge、スマホ

■ 実際の症状
Master Sliderをショートコードで貼り付けたが表示されません。
固定ページ、投稿ページ、どちらも表示されません。

カスタマイズのプレビューは表示されています。
プラグインに設置画面のプレビューでは表示されています。

[対馬 俊彦]

crossFade を使いたいのであれば、
VK スライダーは使えない（独自に JavaScript でコーディングが必要）
と思います。

そこまでしなくても、
以下の CSS で wkwk さんがやりたいことができる気がします。(たぶん)

.vk_slider_item {
    opacity: 0 !important;
}
.vk_slider_item.swiper-slide-active {
    opacity: 1 !important;
}

お時間があれば試してみてください。

• この返信は1年、 1ヶ月前に対馬 俊彦が編集しました。

[石川＠Vektor,Inc.]

う…うーん…よく状況が理解できていないのですが、
透過させるために透過pngを使って重なる事なくフェードというのがちょっとわからないのですが、

透過png → 透過する
フェード → 透過する

のでそれは物理的に無理なのかなという印象がしますが…

まずスライドに指定する画像が透過しなくてはいけない理由は何でしょうか？
特になければ１枚のスライダーの中に透過しない背景を置いた上で透過pngを置けば良いのではないかなと思いました。

[wkwk]

■ 期待する動作
VK Blocksのスライダーブロックを利用、エフェクト”フェード”適用時に
透明度を持つ画像を設定して、重なることなくフェードにて表示する。

■ 自分で試した事
１．2個のスライダーアイテムにそれぞれ背景透過画像(png)を、背景に設定して動作確認
⇒2枚の画像が重なって表示

２．2個のスライダーアイテムに透明度を持たない画像(jpg等）を背景に設定して動作確認
⇒期待する動作

３．2個のスライダーアイテムにボタンブロック１つを追加して、それぞれの配置を変えて動作確認
⇒常に2個のボタンが見える状態（ホバー、クリック可否等の確認は忘れました…。）

４．2個のスライダーアイテムにカバーブロックを置いて透過画像を設定、スライダーアイテムの
背景を白、透過設定を1に設定して動作確認
⇒期待する動作

■ その他特記事項
いつも大変お世話になっております。

既存静的サイトをトレースする形のWordpress化という案件を行っている中で、
標記の症状を確認しました。

フォーラム等調べたつもりですが既知の問題であったら、大変恐縮です。
Slackも確認しながら、スライダーブロックでは”swiper.js”を利用していると
お見受けしたのですが、それを基にググってみたところ、当該ライブラリの特性
なのかなという認識です。
（Googleにてクエリ”swiper フェード 透過画像”にて検索）

解決策も複数ネットに上げて頂けている中で、当方のjavascriptやプラグイン周りの
編集という知見が全く無いに等しいため、適用できていない状況です。

スライダーブロックをごちゃごちゃ触って期待する動作も実現できている中で
恐縮ではございますが、本件、Vk Blocks等の改修にてご対応頂けたりしますでしょうか。

該当URLには、自分で試したことの中の１項の症状のままのページを
一時的に公開しております。

以上、何卒よろしくお願いいたします。

[対馬 俊彦]

横から失礼します。

DRILL LANCER さんの回答通りなのですが、ちょっと補足させていただきます。

JavaScript を書かずにスライドショーを動かす TIPS を紹介します。

1行目の

<div class="swiper">

を

<div class="lightning_swiper-container swiper-container">

と書き換えれば、トップページのスライドショーと同じ設定で動作します。

エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり…

ロックをかけておけば、そのリスクが軽減されると思います。

画面幅に応じたサイズの画像を WordPress が自動生成してくれるということもスライダーブロック（画像ブロック）で作るメリットです。

[DRILL LANCER]

多分 Swiper に対して指示を送る Javascript が存在しない or 読み込まれていないのが原因です。

例：

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

現状の仕様で実現したいのなら下記を参考に指示用の Javascript をつくって swiper の後で読み込ませる必要があります。
https://swiperjs.com/swiper-api

P.S.
掲載されたコードの例だとスライダーアイテムブロックの中に画像ブロックを設置して画像ブロックのツールバーからリンクを設定すればほぼ同等なことができると思います。

[webfactoryjp]

石川様
ご回答ありがとうございます。

最終的には
プラグインACFを組んで
任意の画像をメディアから選択したものを読ませたいのです。
最低限必要な操作ができる程度のユーザーさんでも
メニューから画像を選択するだけでスライダーに組めるようにしたいのです。

VK Blocks はわかっている人からしたらとても使い勝手の良いツールですが、エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり、その都度修正してあげなくてはなりません。

エンドユーザーには最低限出来る事だけを公開しておきたいのです。

最終的には下記のようなコードでACFで設定した画像を呼び出したいと考えています。

<div class="swiper">
<div class="swiper-wrapper">
<?php if( have_rows('banner_top', 'option') ): ?>
    <?php while( have_rows('banner_top', 'option') ): the_row(); 
         // vars
        $image = get_sub_field('banner_top_img', 'option');
        $link = get_sub_field('banner_top_url', 'option');
     ?>
         <div class="swiper-slide>
            <?php if( $link ): ?>
                <a href="<?php echo $link; ?>">
            <?php endif; ?>
                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
            <?php if( $link ): ?>
                </a>
            <?php endif; ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
</div>
</div>

[石川＠Vektor,Inc.]

ブロックエディタやテーマの幅処理に応じてチューニングしてるので、スライダーブロックを配置して見比べるのが一番早いと思います。

https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-industry=&pattern-product=&pattern-type=slider&demo-site=&s=&vkfs_form_id=fc550ff3-791b-426b-aeb3-375e7fb39bd8

ちなみに VK Blocks のスライダーブロックではダメな理由は何でしょうか？

[webfactoryjp]

■ WordPress のバージョン
6.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 1.16.0

■ Pro Unit のバージョン
バージョン 0.17.1

■ スキンの種類
プレーン

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
固定ページにおいて
vk blockやコンテンツスライダーを使用せず
任意の文字や画像を
swiperでスライド出力したいのですが
元々swiperが内包されているとのことで下記のようなコードを
カスタムHTMLで、固定ページに入れたのですが、
swiperが動いてくれません。

内包してあるswiperを動かすにはclass名に何か入れないといけないでしょうか。

■ 自分で試した事

<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

■ 症状が発生するブラウザ
chrome

■ 実際の症状
動かない

[ruby24]

こんばんは。
返信が遅くなりました。

スライダーは別でも作っていただいたのですね。
助かります。

今、確認してみました。
行数が違うものも試しましたが、バッチリでした！
早急に対応していただきありがとうございました。
今後ともよろしくお願い致します。

[ruby24]

■ WordPress のバージョン
WordPress 6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.5.1

■ Pro Unit のバージョン
バージョン 0.23.4

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
EVERGREEN　ピックアップ導入事例のスライダー部分をお客様の声で使用したいのですが、タブレットで表示確認したところ、画像とお客様名が一部見える状態で、感想部分が見えない状態です。

この状態だと写真部分に感想を入れるしかない状態なので、なんとかならないでしょうか？

※タブレットのサイズは9.7型ワイドです。

■ 自分で試した事
制作中サイトとデモサイトで表示の比較　→　同じでした。

■ 症状が発生するブラウザ
バージョン: 110.0.5481.104

■ 実際の症状
画像添付しました

■ その他特記事項
お世話になります。
よろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[うなこ]

スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい

Outerを入なくても、スライダーアイテムに背景画像を設置することができます

【スライド設定> エフェクトをフェードに設定する】
参考サイトのようにするなら、エフェクトをフェードにします。
スライダーを全幅で設置して、親のスライダーを選択して、右側のスライダーの設定画面から【スライド設定】> 「エフェクト」を「フェード」にします。

【スライダー全幅でスライダーアイテムに背景画像を設置】
※添付画像参照
スライダーアイテムを選択しますと、右側のスライダーアイテムのブロック設定画面に【背景設定】が出てきます。背景画像（PC）、背景画像 ( タブレット )、背景画像 ( モバイル )が設置できますので、お好みで設置してください。
背景画像サイズは、「カバー」にすると、画像が見切れずに配置できます。

【スライドアイテム内に画像を配置】
今回はPCとスマホで画像を出しわけしたいということですので
スライドアイテム内にPC用の画像とスマホ用の画像を配置します。

ブロックごとに「非表示設定」機能がありますので、
PCサイズ用の画像は、非表示 ( 画面サイズ : sm )　非表示 ( 画面サイズ : xs )」をオンにして、スマホサイズ用の画像は、非表示 ( 画面サイズ : xxl )、非表示 ( 画面サイズ : xl )、非表示 ( 画面サイズ : lg )、
非表示 ( 画面サイズ : md )をオンにすると、切り替えて表示できます。
※全部のスライダーアイテムに、同じ画像を配置する感じになります。フェードになっているので、後ろの背景だけが切り替わっているように見えると思いますがいかがでしょうか

ポイントは、まずはスライダーアイテムを1つ目を完成させて、2つ目からは複製してアイテムを増やすと背景画像を差し替えるだけなので作業が楽かもしれません。

▼▼▼参考ページ▼▼▼

• 【無料プラグイン】VK Blocks スライダーブロックの使い方を徹底解説（基本編）
• VK Blocks スライダーブロックのパターン9選（実例編）
• VWSオンライン勉強会 #42 Lightningや他テーマでも使える無料スライダーブロック徹底解説

• この返信は1年、 2ヶ月前にうなこが編集しました。
• この返信は1年、 2ヶ月前にうなこが編集しました。
• この返信は1年、 2ヶ月前にうなこが編集しました。
• この返信は1年、 2ヶ月前にうなこが編集しました。
• この返信は1年、 2ヶ月前にうなこが編集しました。

Attachments:

You must be logged in to view attached files.

[takesho]

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
Lightning

■ Pro Unit のバージョン
0.23.4

■ スキンの種類
Evergreen

■ スキンのバージョン
0.2.1

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
トップページスライドショーの上に画像を置いて、後ろの画像がスライドしても上に置いている画像はそのままになるようにしたい。

スマートフォンだとその画像の配置もうまく変わるようにしたい。

参考：
https://1mental-clinic.com/

■ 自分で試した事
スライダーアイテムにOuterを重ねてみたが、スライドショーが全幅にならなかった(方法が分からない)ので、うまくいく方法があれば教えてほしい

■ 症状が発生するブラウザ
Google　Chrome

■ 実際の症状
スライダーアイテムが全幅にならない

[kg-mio]

石川様

ご教示いただいた方法で無事にトップページへスライダーを表示させることができました。
今後はこちらを使ってまいります。
ありがとうございました。

うなこ様

お声がけいただきありがとうございました。