Slider geht jetzt zwar habe aber das css zerschossen

Emess · 8. Februar 2024

Baste da ja nun schon seit Wochen rum und vieles ist geschehen und gelernt worden. Aber wenn ich den Browser zusammenschiebe, offenbaren sich meine eklatanten Bemühungen.

Dass ich für die Mobile Ansicht Media Querry bemühen muss erwarte ich. Aber beim zusammenschieben des Browsers, sieht man wies sich der Content in dem Falle die Bilder nicht responsive verhält Von der Slider-Navigation ganz zu schweigen. Wo fängt man da jetzt am besten an. Ich zeige euch mal den code und den Link wo man das Problem visull begutachten kann.

CSS

* {
  box-sizing: border-box;
}
.slider-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 1rem;
  position: relative;
  overflow: hidden;
}

.slides-container {
  height: calc(100vh - 2rem);
  width: 75%;
  display: flex;
  justify-self: center;
  align-items: center;
  overflow: scroll;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
}
 .slides-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */ 
} 
/* WebKit */
.slides-container::-webkit-scrollbar { 
  width: 0;
  height: 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: 0px;
  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: 80%;
  height: 80%;
  flex: 1 0 100%;
  display: flex;

  justify-content:center;
  align-items: center;
  background-color: #300d77;
}

.slide > img {
  width: 90%;
  height: 90%;

}

Alles anzeigen

HTML

<section id="galerie">

        <div class="slider-wrapper">
  <button class="slide-arrow" id="slide-arrow-prev">
    &#8249;
  </button>
  <button class="slide-arrow" id="slide-arrow-next">
    &#8250;
  </button>

  <div class="slides-container"  id="slides-container">
    <div class="slide"><img src="images/slider/resized/walach1.jpg" alt="Image 1"></div>
    <div class="slide"><img src="images/slider/resized/walach2.jpg" alt="Image 2"></div>
    <div class="slide"><img src="images/slider/resized/walach3.jpg" alt="Image 3"></div>
    <div class="slide"><img src="images/slider/resized/walach4.jpg" alt="Image 4"></div>
    <div class="slide"><img src="images/slider/resized/walach5.jpg" alt="Image 5"></div>
    <div class="slide"><img src="images/slider/resized/walach6.jpg" alt="Image 6"></div>
    <div class="slide"><img src="images/slider/resized/walach7.jpg" alt="Image 7"></div>
    <div class="slide"><img src="images/slider/resized/walach8.jpg" alt="Image 8"></div>
    <div class="slide"><img src="images/slider/resized/walach9.jpg" alt="Image 9"></div>
  </div>

        </div>
        
    </section>

Alles anzeigen

hier der ist es online

Dann mal gute Nacht

Emess · 9. Februar 2024

So habe alle Foren durchforstest und konnte den Slider reparieren Ist jetzt responsive. Bestimmt muss ich auch noch einige Media querries estellen müssen.

Doch von meinen 9 Bildern werden nur 5 angezeigt. Der fehler ist wohl, dass die bilder in neun divs liegen.

Wenn ich das in ein ul mit 9 li packe. Löst das dann das Problem?

Und wie änder ich meine css am liebsten mit Flexbox ? Und hat das Auwirkungen auf JS?

CSS

<section id="galerie">

        <div class="wrapper">
            <div class="slider-wrap">

                 <div id="slider" class="slider">
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
              </div>


              <!-- <div id="slider" class="slider">
                <div class="slide"><img src="images/slider/walach1.jpg" alt="Image 1"></div>
                <div class="slide"><img src="images/slider/walach2.jpg" alt="Image 2"></div>
                <div class="slide"><img src="images/slider/walach3.jpg" alt="Image 3"></div>
                <div class="slide"><img src="images/slider/walach4.jpg" alt="Image 4"></div>
                <div class="slide"><img src="images/slider/walach5.jpg" alt="Image 5"></div>
                <div class="slide"><img src="images/slider/walach6.jpg" alt="Image 6"></div>
                <div class="slide"><img src="images/slider/walach7.jpg" alt="Image 7"></div>
                <div class="slide"><img src="images/slider/walach8.jpg" alt="Image 8"></div>
                <div class="slide"><img src="images/slider/walach9.jpg" alt="Image 9"></div>
              </div> -->
            </div>
            <div class="btn-wrap">
              <i id="prev" class="material-icons btn">&#171;</i>
              <i id="next" class="material-icons btn">&#187;</i>
            </div>
          </div>

    </section>

Alles anzeigen

Code

#galerie{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: aquamarine;
}
.wrapper{

  position: relative;
  max-width: 800px;
  width: 90%;
  height: 56.25vw;
  max-height: 600px;
  box-shadow: 0 0 15px rgba(0,0,0,.35);
}

.slider-wrap{
  height: 100%;
  width: 100%;
  overflow: hidden;

}

.slider{
  position: relative;
  left: 0;
  height: 100%;
  width: 500%;
  transition: 300ms ease-in-out;
}

.slide
{
  float: left;
  height: 100%;
  width: 20%;
  background-size: cover;
}

.slide:nth-child(1) { background-image: url(../images/slider/walach1.jpg); }
.slide:nth-child(2) { background-image: url(../images/slider/walach2.jpg); }
.slide:nth-child(3) { background-image: url(../images/slider/walach3.jpg); }
.slide:nth-child(4) { background-image: url(../images/slider/walach4.jpg); }
.slide:nth-child(5) { background-image: url(../images/slider/walach5.jpg); } 
.slide:nth-child(6) { background-image: url(../images/slider/walach6.jpg); }
.slide:nth-child(7) { background-image: url(../images/slider/walach7.jpg); }
.slide:nth-child(8) { background-image: url(../images/slider/walach8.jpg); }
.slide:nth-child(9) { background-image: url(../images/slider/walach9.jpg); } 

.btn
{
  position: absolute;
  top: 250px;
  width: 40px;
  height: 55px;
  font-size: 40px;
  font-weight: 700;
  color: #FFF;
  background: #2C2C2C;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background 150ms ease-in-out;
}

.btn:first-child { left: -.5em;  }
.btn:last-child  { right: -.5em;}

.btn:hover  { background: #131313; }
.btn:active
{
  transform: scale(.97);
  background: #000;
}

@media(max-width: 950px)
{
  .slide {background-position: center;}
  
  .btn { top: -.7em; }
  .btn:first-child { left: calc(50% - 1em); }
  .btn:last-child { left: calc(50% + 1em); }
}

Alles anzeigen

JavaScript

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var slider = document.getElementById('slider');
var total = 0, step = 100;

prev.addEventListener('click', slide);
next.addEventListener('click', slide);

function slide()
{
  if(this.getAttribute('id') == 'prev')
  {
    if(total == 0)
    {
      total = -400;
      slider.style.left = total + '%';
    }
    else
    {
      total += step;
      slider.style.left = total + '%';
    }
  }
  else
  {
    if(total == -400)
    {
      total = 0;
      slider.style.left = total;
    }
    else
    {
      total -= step;
      slider.style.left = total + '%';
    }
  }
}

Alles anzeigen

Vielleicht hat ja jemand einen Link mit einem Beispiel für alte Männer oder Anfänger.

Oder kann sogar selbst ein Beispiel geben

Emess · 11. Februar 2024

So habe die Sache mit dem Slider gelöst. Das schein ja eine echte harte Nuss zu sein.

Falls mal jemand nicht wissen sollte wie das geht. Dann möchte ich hier ein Beispiel geben

1. Etwas html

HTML

<div class="slider-container">
    <div class="slider">
                <div class="slide"><img src="images/slider/walach1.jpg" alt="Image 2"></div>
                <div class="slide"><img src="images/slider/walach2.jpg" alt="Image 2"></div>
                <div class="slide"><img src="images/slider/walach3.jpg" alt="Image 3"></div>
                <div class="slide"><img src="images/slider/walach4.jpg" alt="Image 4"></div>
                <div class="slide"><img src="images/slider/walach5.jpg" alt="Image 5"></div>
                <div class="slide"><img src="images/slider/walach6.jpg" alt="Image 6"></div>
                <div class="slide"><img src="images/slider/walach7.jpg" alt="Image 7"></div>
                <div class="slide"><img src="images/slider/walach8.jpg" alt="Image 8"></div>
                <div class="slide"><img src="images/slider/walach9.jpg" alt="Image 9"></div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Alles anzeigen

Etwas css

CSS

.slider-container {
  position: relative;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  height: auto;
}

.prev, .next {
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  font-size: 24px;
  color: white;
  cursor: pointer;
  user-select: none;
  transition: 0.6s ease;
  background-color: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

Alles anzeigen

und in coperation Javascript

JavaScript

let slideIndex = 1;
let slides;

function showSlides(index) {
  slides = document.querySelector('.slider');

  if (slides) {
    const totalSlides = slides.children.length;

    // Überprüfen, ob der Index außerhalb des Bereichs liegt
    if (index > totalSlides) {
      slideIndex = 1; // Wenn ja, zurück zum Anfang
    } else if (index < 1) {
      slideIndex = totalSlides; // Wenn am Anfang, zum letzten Bild springen
    } else {
      slideIndex = index;
    }

    for (let i = 0; i < totalSlides; i++) {
      slides.children[i].style.display = 'none';
      slides.children[i].style.opacity = 0; // Setzen Sie die Opazität auf 0 für alle Slides
    }

    slides.children[slideIndex - 1].style.display = 'block';
    fade(slides.children[slideIndex - 1], 1, 1, 500); // Fade-In-Effekt mit einer Dauer von 1000 Millisekunden
  } else {
    console.log("Slider not found");
  }
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Funktion für den Fade-In-Effekt
function fade(element, startOpacity, endOpacity, duration) {
  let startTime = null;

  function animate(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = timestamp - startTime;
    const opacity = easeInOutCubic(progress, startOpacity, endOpacity - startOpacity, duration);

    element.style.opacity = opacity;

    if (progress < duration) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// Easing-Funktion für einen weichen Start und ein weiches Ende
function easeInOutCubic(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t * t + b;
  t -= 2;
  return c / 2 * (t * t * t + 2) + b;
}

Alles anzeigen

das jedenfalls klappt ganz gut. Ich hatte angenommen das man sowas hin und wieder gebrauchen kann. Aber zu wenig, für Anfänger dokumentiert ist

Emess · 11. Februar 2024

optimiertes Script

JavaScript

let currentSlide = 0;

  function showSlide(index) {
    const slider = document.querySelector('.slider');
    const slides = document.querySelectorAll('.slide');
    const totalSlides = slides.length;

    if (index >= totalSlides) {
      currentSlide = 0;
    } else if (index < 0) {
      currentSlide = totalSlides - 1;
    } else {
      currentSlide = index;
    }

    const translateValue = -currentSlide * 100 + '%';
    slider.style.transform = 'translateX(' + translateValue + ')';
  }

  function prevSlide() {
    showSlide(currentSlide - 1);
  }

  function nextSlide() {
    showSlide(currentSlide + 1);
  }

Alles anzeigen

das glättet den Übergang

Failix · 11. Februar 2024

Ich hatte auch gerade Bedarf an einem Slider und habe mir das gebastelt:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slider</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
      padding: 1rem;
    }

    .slide-container,
    .slide-buttons {
      display: flex;
      width: 90vw;
      margin: 0 auto;
    }

    .slide-container {
      overflow: hidden;
      min-height: 50vh;
      background-color: antiquewhite;
    }

    .slide-container div {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 100%;
      min-height: 100%;
      background-color: goldenrod;
    }

    .slide-buttons {
      justify-content: space-between;
    }
  </style>
</head>

<body>

  <div class="slide-container">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <div class="slide">Slide 4</div>
    <div class="slide">Slide 5</div>
    <div class="slide">Slide 6</div>
    <div class="slide">Slide 7</div>
    <div class="slide">Slide 8</div>
    <div class="slide">Slide 9</div>
  </div>
  <div class="slide-buttons">
    <button id="left">next</button>
    <button id="right">prev</button>
  </div>

  <script>
    const slides = document.querySelectorAll("body > div.slide-container > div");
    const buttonLeft = document.querySelector("#left");
    const buttonRight = document.querySelector("#right");
    let i = 0;

    buttonRight.style.cssText = "opacity: .3;";

    buttonLeft.addEventListener('click', () => {
      if (i < slides.length - 1) {
        slides[i].style.cssText = "margin-left: -100%; transition: margin-left .7s";
        i++;
        buttonRight.style.cssText = "opacity: 1;";
      };
      if (i == slides.length - 1) {
        buttonLeft.style.cssText = "opacity: .3;";
      };
    });

    buttonRight.addEventListener('click', () => {
      if (i < slides.length && i > 0) {
        i--;
        slides[i].style.cssText = "margin-left: 0; transition: margin-left .7s";
        buttonLeft.style.cssText = "opacity: 1;";
      };
      if (i == 0) {
        buttonRight.style.cssText = "opacity: .3;";
      };
    });
  </script>
</body>

</html>

Alles anzeigen

Scheint ganz gut zu funktionieren. Für ordentliche Buttons war ich heute noch zu faul.

Emess · 11. Februar 2024

Der scheint gut zu funktionieren. dann gutes gelingen mit den Buttons.

Ich habe mir welche als html code genutzt und per und mit css gestylt

Slider geht jetzt zwar habe aber das css zerschossen

Jetzt mitmachen!

Teilen

Tags