EASY meishiにスライダーを入れたい

[鈴木]

お世話になっております。

EASY meishiをカスタマイズして、Simple sliderのヘッダのようなスライダーをカラムの中に小さく挿入したいと思っています。

このスクショの画像部分をスライダーにしたいと思っています。

スクショはスライダーでない普通の画像です。画像の元サイズは1400×840で、カラムの横幅に合わせて縮小させています。

Simple sliderを分解して、HTMLのスライダー部分と、それに関連するであろうCSSをコピーして、スライダー機能そのものの設置には成功したのですが、表示崩れが起こってしまいます。

CSSのどの部分を修正したら希望のサイズに変更できるでしょうか？シンプルが売りのデザインに色々足してすみません。

また、jsフォルダ内のcommon.jsはスライダーに不要なファイルでしょうか？

（jquery.jsとswiper-bundle.min.jsは必要だろうとアタリをつけてフォルダに入れています）

面倒な質問で申し訳ないのですが、どうぞよろしくお願いします。

/* スライダー関連 */
.swiper-container {
width: 100%;
}

.swiper-slide {
position: relative;
}

.swiper-slide img {
position: relative;
z-index: 1;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}

.swiper-slide .text {
background: transparent;
position: absolute;
z-index: 100;
top: 30%;
}

@media screen and (max-width: 767px) {
.swiper-slide .text {
top: 13%;
}
}

.swiper-slide .text p {
padding: 0;
}

.swiper-slide .text.center {
text-align: center;
left: 0;
right: 0;
}

.swiper-slide .text.left {
text-align: left;
left: 20%;
}

@media screen and (max-width: 991px) {
.swiper-slide .text.left {
left: 10%;
}
}

@media screen and (max-width: 767px) {
.swiper-slide .text.left {
left: 4%;
}
}

.swiper-slide .text.left a.btn {
margin-left: 0;
}

.swiper-slide .text.right {
text-align: right;
right: 20%;
}

@media screen and (max-width: 991px) {
.swiper-slide .text.right {
right: 10%;
}
}

@media screen and (max-width: 767px) {
.swiper-slide .text.right {
right: 4%;
}
}

.swiper-slide .text.right a.btn {
margin-right: 0;
}

.swiper-slide .text.white {
color: white;
}

.swiper-slide .text.black {
color: #333333;
}

.swiper-slide .text strong {
font-size: 200%;
line-height: 2em;
font-family: “Kulim Park”, “M PLUS 1p”, sans-serif;
}

[鈴木]

この辺をいじったら、小さくすること自体はできたのですが、まだ横に表示崩れしてしています。

面倒な質問ですみません。ヒントや調べ方だけでも教えて頂けたらと思います。

.swiper-container {
width: 50%;
}

.swiper-slide {
position: relative;
}

.swiper-slide img {
position: relative;
-o-object-fit: scale-down;
object-fit: scale-down;
width: 100%;

}

.swiper-slide .text {
background: transparent;
position: absolute;
z-index: 100;
top: 30%;
}

[鈴木]

自己レスです。

swiper-containerを50％にしてしまうとスマホ表示の際に小さくなりすぎてしまうようですね。

PC表示の時にカラムの幅に合わせたいのですが、私にCSSの知識が足りずに変な風になってるようです。

 

ちなみに制止画の際の画像の設定はこれで、最初のスクショのように、こっちは上手くいってます。

.col img {
display: block;
margin-left: auto;
margin-right: auto;
max-width:100%;
}

[鈴木]

すみません、自己解決したっぽいです。

お騒がせしてすみません。

貴重な場所をお貸しくださり、ありがとうございます。

[投稿者]

投稿