by Guest » 16 Feb 2025, 11:44
Ich versuche, einen Bildschieberer mit Namen und Beschreibung zu erstellen, aber wenn ich ein weiteres Bild hinzufüge, habe ich vertikal versucht, das Display zu ändern, aber nichts passiert, kann man mir bei diesem nur neu in CSS und HTML helfen.
Ich möchte diese Art von Bildschieberegler
Bildbeschreibung hier eingeben
, aber stattdessen tritt dies
Bildbeschreibung hier ein < /p>
was ich jetzt habe: < /p>
.services {
position: relative;
overflow: hidden;
padding: 20px;
}
.services-container {
padding: 0 10vw;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
.services-container::-webkit-scrollbar {
display: none;
}
.service-card {
flex: auto;
display: inline-block;
width: 300px;
height: 450px;
text-align: center;
margin-right: 40px;
}
.service-image {
position: relative;
overflow: hidden;
height: 350px;
width: 100%;
}
.service-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}< /code>
Anti Acne
Description
Anti Aging
Description
< /code>
< /div>
< /div>
< /p>
Ich habe eine andere Anzeige ausprobiert, aber nichts passiert, es erscheint nur das Bild und Es passt nicht zum Behälter
Ich versuche, einen Bildschieberer mit Namen und Beschreibung zu erstellen, aber wenn ich ein weiteres Bild hinzufüge, habe ich vertikal versucht, das Display zu ändern, aber nichts passiert, kann man mir bei diesem nur neu in CSS und HTML helfen.
Ich möchte diese Art von Bildschieberegler
Bildbeschreibung hier eingeben
, aber stattdessen tritt dies
Bildbeschreibung hier ein < /p>
was ich jetzt habe: < /p>
.services {
position: relative;
overflow: hidden;
padding: 20px;
}
.services-container {
padding: 0 10vw;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
.services-container::-webkit-scrollbar {
display: none;
}
.service-card {
flex: auto;
display: inline-block;
width: 300px;
height: 450px;
text-align: center;
margin-right: 40px;
}
.service-image {
position: relative;
overflow: hidden;
height: 350px;
width: 100%;
}
.service-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}< /code>
[img]image/arrow.png[/img]
[img]image/arrow.png[/img]
[img]image/antiacne.jpg[/img]
Anti Acne
Description
[img]image/antiageing.jpg[/img]
Anti Aging
Description
< /code>
< /div>
< /div>
< /p>
Ich habe eine andere Anzeige ausprobiert, aber nichts passiert, es erscheint nur das Bild und Es passt nicht zum Behälter