Görseldeki gibi bir footer nasıl yapılır?

533388 dedi:
O zaman kısımlara ayırıp inceleyin.
Genişletmek için tıkla...
Hocam slider yaptım onunla ilgili bir sorum var .Slider da geçiş yaptığım zaman sayfa kendini otomatik olarak navbarın altına atıyor.

Kodlar bu şekilde:
HTML
<section class="slider">
<div class="slider-wrapper">
<div class="slider-1">
<img id="slide-1" src="game1 (2).jpg" alt="">
<img id="slide-2" src="game2.jpg" alt="">
<img id="slide-3" src="game3.jpg" alt="">
<img id="slide-4" src="game4.jpg" alt="">
<img id="slide-5" src="game5.jpg" alt="">

</div>
<div class="slider-nav">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
<a href="#slide-5"></a>
</div>
</div>
</section>

CSS

.slider{
padding: 2rem;

}
.slider-wrapper{
position: relative;
max-width: 50rem;
margin: 0 auto;
}
.slider-1{
display: flex;
aspect-ratio: 16/9;
overflow-x: auto;
scroll-snap-type: none;
scroll-behavior: smooth;
box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
border-radius: 0.5rem;
overflow: hidden;
}
.slider-1 img{
flex: 1 0 100%;
scroll-snap-align: start;
object-fit: cover;
}
.slider-nav{
display: flex;
column-gap: 1rem;
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.slider-nav a{
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition: 250ms ease;
}
.slider-nav a:hover{
opacity: 1;
}
 

Dosya Ekleri

  • Ekran görüntüsü 2023-11-13 154104.png
    Ekran görüntüsü 2023-11-13 154104.png
    1,3 MB · Görüntüleme: 26

Benzer konular

E1Rhan
Görseldeki footer nasıl yapılır?
Mesaj
2
Görüntüleme
764
bonz
bonz
yone1108
  • Çözüldü
Çözüldü  Sabit footer ve navigasyon nasıl yapılır?
Mesaj
2
Görüntüleme
1.005
yone1108
yone1108
Oldus
Discord gibi bir site nasıl yapılır?
2 3
Mesaj
25
Görüntüleme
2.471
Yuspro
Yuspro
T
  • Soru
Autoplay'deki gibi bir slayt nasıl yapılır?
Mesaj
3
Görüntüleme
615
tasarimci
T
0.0_lucas
Footer nasıl alta alınır?
Mesaj
5
Görüntüleme
451
MidI0ck
MidI0ck

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı