04.02.2024, 17:32
Der Titel für Irre, denn es liegt wohl an mir, weil ich was scripting angeht ahnungslos bin.
Habe mir bei codepen was runtergeladen von dem ich dachte damit arbeiten könnte. Aber bisher hat noch nichts von Codepen so richtig funktioniert was js angeht.
Ich habe davon keine Ahnung weis aber wie man es normalerweise einbindet
Das habe ich herunter gelade und für mich html- und css-mässig angepasst.
https://codepen.io/tutsplus/pen/XWZqGgX
Da läuft es.
Bei mir auf dem Server nicht.
Und ich habe nicht den geringsten Schimmer
Habe mir bei codepen was runtergeladen von dem ich dachte damit arbeiten könnte. Aber bisher hat noch nichts von Codepen so richtig funktioniert was js angeht.
Ich habe davon keine Ahnung weis aber wie man es normalerweise einbindet
Das habe ich herunter gelade und für mich html- und css-mässig angepasst.
https://codepen.io/tutsplus/pen/XWZqGgX
Da läuft es.
Bei mir auf dem Server nicht.
Und ich habe nicht den geringsten Schimmer
Code:
<!DOCTYPE html">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
max-width: 1440px;
margin: auto;
}
.slider-wrapper {
margin: 1rem;
position: relative;
overflow: hidden;
}
.slides-container {
height: calc(100vh - 2rem);
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.slide-arrow {
position: absolute;
display: flex;
top: 0;
bottom: 0;
margin: auto;
height: 4rem;
background-color: white;
border: none;
width: 2rem;
font-size: 3rem;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 100ms;
}
.slide-arrow:hover,
.slide-arrow:focus {
opacity: 1;
}
#slide-arrow-prev {
left: 0;
padding-left: 0.25rem;
border-radius: 0 2rem 2rem 0;
}
#slide-arrow-next {
right: 0;
padding-left: 0.75rem;
border-radius: 2rem 0 0 2rem;
}
.slide {
width: 100%;
/* height: 100%; */
flex: 1 0 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slide > img {
width: 80%;
height: 80%;
}
.slide:nth-child(1) {
background-color: #49b293;
}
.slide:nth-child(2) {
background-color: #b03532;
}
.slide:nth-child(3) {
background-color: #6a478f;
margin: 0;
}
.slide:nth-child(4) {
background-color: #da6f2b;
}
</style>
</head>
<body>
<!-- <section id="galerie"> -->
<section class="slider-wrapper">
<button class="slide-arrow" id="slide-arrow-prev">
‹
</button>
<button class="slide-arrow" id="slide-arrow-next">
›
</button>
<div class="slides-container" id="slides-container">
<div class="slide"><img src="images/walach1.jpg" alt="Image 1"></div>
<div class="slide"><img src="images/walach2.jpg" alt="Image 2"></div>
<div class="slide"><img src="images/walach3.jpg" alt="Image 3"></div>
<div class="slide"><img src="images/walach4.jpg" alt="Image 4"></div>
<div class="slide"><img src="images/walach5.jpg" alt="Image 5"></div>
<div class="slide"><img src="images/walach6.jpg" alt="Image 6"></div>
<div class="slide"><img src="images/walach7.jpg" alt="Image 7"></div>
<div class="slide"><img src="images/walach8.jpg" alt="Image 8"></div>
<div class="slide"><img src="images/walach9.jpg" alt="Image 9"></div>
</div>
</section>
<script>
const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
nextButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft += slideWidth;
});
prevButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft -= slideWidth;
});
</script>
</body></html>
