Craftのスライドショー（スライダー）画像全体に直接リンクをつけたい。

日本語 ディスカッション 技術的なQ＆A
1

Craftの標準装備のスライダーを、画像を直接クリックしてリンクに飛ばせるようにしたいです。

セクション＞slideshow.liquid を編集し、ブロックとして追加はできました。

スマホビューだとタップでリンクするが、PCはビューからクリックしてもリンクすることができません。

2

@mina37 さん
はじめまして

もうすでに解決されてましたら蛇足になりますが、

PC/スマホ問わず、スライダー全体にリンクをつけたいうという事で、

手取り早い方法として、slideshow.liquid内のスライド画像とテキストボタンのエリアのHTMLの外側にaタグを追加で記述することで実現可能です。

スライド画像エリアのコードはこちらです。


{%- if block.settings.image -%}

{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

スライド画像のHTMLを囲むaタグ「<a {% if block.settings.link %} href=“{{ block.settings.link }}”{% endif %}>」と、「」を追加しています。。

また、テキスト&ボタンエリアのコードがこちらです。


			

			

				{%- if block.settings.heading != blank -%}
				## {{ block.settings.heading | escape }}
				{%- endif -%}
				{%- if block.settings.subheading != blank -%}
				
					{{ block.settings.subheading | escape }}
				

				{%- endif -%}
				{%- if block.settings.button_label != blank -%}
				
					{{ block.settings.button_label | escape }}
				

				{%- endif -%}

画像上のテキスト＆ボタンのエリアのHTMLを囲むaタグ「<a {% if block.settings.link %} href=“{{ block.settings.link }}”{% endif %} style=“display: block; width: 100%;height: 100%;text-decoration: none;”>」と「」を追加しました。

こちらでPC/スマホどちらでも、エディタ上で設定したリンクに飛べるスライドショーにカスタマイズ出来ます。

また、さらにカスタマイズしたいとのことでしたらSwiperなどに載せ替えてみるのも一つの手かなと思います。

<参考>

https://torublog.com/shopify-slideshow-swiper-js/

少しでも参考になりましたら幸いです。