Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Java script geht nicht
#1
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


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>
Zitieren


Nachrichten in diesem Thema
Java script geht nicht - von Mick62 - 04.02.2024, 17:32
RE: Java script geht nicht - von Mick62 - 05.02.2024, 17:13
RE: Java script geht nicht - von rzscout - 06.02.2024, 13:34

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste