Slider'a görsel nasıl sığdırılır?

soon · 23 Nisan 2022

Sadece görseli Slider'a sığdırmak istiyorum, nasıl yapabilirim?

HTML:

<!-- Hero Section Begin -->
<section class="hero-section">
    <div class="hs-slider owl-carousel">
        @foreach($sliderdata as $rs)
        <div class="hs-item set-bg" data-setbg="{{Storage::url($rs->image)}}" style="width: 1920px;height: 1040px">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 offset-lg-6">
                        <div class="hi-text">
                            <span>{{$rs->title}}</span>
                            <h1>Be <strong>strong</strong> traning hard</h1>
                            <a href="#" class="primary-btn">Get info</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>
<!-- Hero Section End -->

Diğer itemları etkilemeden eklenen görseli Slider'a sığdırmanın bir yolu yok mu arkadaşlar?
@Ecmel Hocam bakabilir misiniz?

Ecmel · 23 Nisan 2022

"hs-item set-bg" olan classınıza object-fit: cover; vermeyi denediniz mi? Anladığım kadarıyla istediğiniz şey kullanacağınız görselin div'in tamamını kaplaması. Diğer verdiğiniz değerleri silmeyin, verdiğimi ekleyin sadece style'a.

soon · 23 Nisan 2022

Ecmel dedi:
"HS-item set-bg" olan classınıza object-fit: cover; vermeyi denediniz mi? Anladığım kadarıyla istediğiniz şey kullanacağınız görselin Div'in tamamını kaplaması. Diğer verdiğiniz değerleri silmeyin, verdiğimi ekleyin sadece Style'a.

Denedim fakat sorun düzelmedi. İstediğim şey farklı boyuttaki görselleri Slider'a diğer itemları etkilemeden ekleyip, sığdırabilmek.

Ecmel · 23 Nisan 2022

soon dedi:
Denedim fakat sorun düzelmedi.

CSS tarafında şu şekilde yazıp verdiğiniz özellikleri verebilir misiniz?

.set-bg img{ } Class olarak bunun içine verin dediğim özelliği ve div'in style kısmında yazanları.

Eğer verdiğim şekilde olmazsa aynı class'a bu kodları yazar mısınız?

CSS:

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;

soon · 23 Nisan 2022

şöyle;

CSS:

.set-bg {
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

Ecmel · 23 Nisan 2022

soon dedi:
Şöyle;

CSS:

.set-bg { object-fit: cover; background-repeat: no-repeat; background-size: cover; background-position: top center; }

Bu şekilde çözüldü mü?

soon · 24 Nisan 2022

Ecmel dedi:
Bu şekilde çözüldü mü?

Maalesef çözülmedi.

CSS:

.set-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

Bu şekilde de değişmedi.

Ecmel · 24 Nisan 2022

Kodunu direkt olarak atabilir misin? CSS kısmı da dahil, bakayım ben bir.

soon · 24 Nisan 2022

Ecmel dedi:
Kodunu direkt olarak atabilir misin? CSS kısmı da dahil, bakayım ben bir.

Direkt kullandığım template bu:template

Ecmel · 24 Nisan 2022

Template üzerindeki CSS kodlarını değiştirmediğiniz zaman çıkan sonucun ekran görüntüsünü atabilir misiniz?

Slider'a görsel nasıl sığdırılır?

Ayrıntılı düzenleme

soon

Hectopat

Ecmel

Megapat

soon

Hectopat

Ecmel

Megapat

soon

Hectopat

Ecmel

Megapat

soon

Hectopat

Ecmel

Megapat

soon

Hectopat

Ecmel

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz