【owl-carousel】レスポンシブスライダーの横幅をスマホに対応させる

Question

こんにちは。楽天GOLDにPCスマホ共用のトップページをつくっています。
https://www.rakuten.ne.jp/gold/off-price/
スライダー部分に、owl-carouselというJsでスライダーを設置しました。
*******************************************

	
		
			
				
					
						
							Hero Brand
							Kate Spade
							ほんの少しの勇気で世界は変わる！
							   日常生活をカラフルに彩り、明るく華やかな愛らしさで、「ファッションの喜び」というエッセンスを貴女の毎日に...
							DISCOVER
						
					
以下略
*******************************************
スライダーの画像は横が1920pxです。

PC表示では、ブラウザの横幅に応じて、可変します。
一方、スマホで見たときに、横がはみ出します。
画像のサイズを小さくしてみましたが、引き伸ばされて表示され、画質が悪くなるだけででした。
また、CSSの
hero-sectionにmax-width="**px"で、最大幅を入れてみましたが効かないようです。

スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか？

WEB制作は、初心者です。

宜しくお願い致します。###HR######IMG06915a6e887ed0eee746326e13df6075b.jpegIMG0### ###IMG1cad9c707ff07afb33916ee588207f6fa.jpegIMG1### ###IMG24a6b38e0a6d4eaef68e123c80779f5d3.jpegIMG2###

Accepted Answer

ECマスターズの伊藤です。

> スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか？

画像が .hs-item に背景(background-image)として表示されているため、
単純に画像を横幅ぴったりに表示させたいということであれば

＝＝＝＝＝＝＝＝＝＝＝＝＝
.hs-item{
    background-size: contain;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝

と、追加していただければ、横幅ぴったりとなります。

background-size: 200%;
background-size: 200px;
といったように、数値でご指定していただくこともできます。

background-sizeについては、下記のサイトに詳しく記載されておりますので
よろしければご参考ください。
https://developer.mozilla.org/ja/docs/Web/CSS/background-size


> PC表示では、ブラウザの横幅に応じて、可変します。

こちらですが、ブラウザの幅によって可変はしてはおらず、
横幅を縮めるとサイドが切れていく、といった状態となっています。

もともとの作りが、スマホを想定ていないか、
横が切れても問題ない画像を使用することを想定していると思われます。

そのため、画像を可変としてしまいますと、縦に余白ができてしまいます。

横幅が切れてもいい画像をご用意いただくか、
PCとスマホで、画像を分けてご用意いただく必要があると思います。

Answer

こんばんは。ご返信ありがとうございます。

スマホサイトにおいている自作のスライダーと全く構造が違っているということがわかりました。

おっしゃる通り、もともとの作りが横が切れていても問題ない画像を使用してありました。
それに沿って画像を選定したのですが、納得できず、考えていました。

ご教授の方法で、やりたかったことそのものはできたのですが、今度は、上に乗っかっている文章がはみ出するという別の問題が浮上したので、このデザインではデフォルトをそのまま活用する方がよさそうだと感じました。

教えて頂いたページ見ながら勉強してみます。

Answer

ECマスターズの伊藤です。

> ご教授の方法で、やりたかったことそのものはできたのですが、今度は、上に乗っかっている文章がはみ出するという別の問題が浮上したので、このデザインではデフォルトをそのまま活用する方がよさそうだと感じました。

そうですね、お使いのものをスマホ用に対応させるには
かなりの時間がかかると思われますので
そのまま活用していただくほうがよろしいかと思います。


> 教えて頂いたページ見ながら勉強してみます。

勉強の際、ご不明な点がございましたら、お気軽にご相談くださいませ。