Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
JavaScript Slideshow
#1
Hallo zusammen,
leider habe ich nicht allzuviel Wissen über Java, dennoch wollte ich eine Slideshow einbauen, was auch gut funktioniert hat mit Hilfe vom WWW.
Nun ist es so, dass ich 3 verschiedene Slider auf einer Seite habe. zwei funktionieren, aber der dritte wird leider nicht angezeigt.
Kann mir bitte jemand helfen, was ich im Code umschreiben muss, damit der 3te auch angezeigt wird und vorallem, was diese Werte genau bedeuten?

Hier der Script Code:

<script>
var slideIndex = [1,1];
var slideId = ["sports_ausfluege_slider1", "sports_ausfluege_slider2", "sports_ausfluege_slider3"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>

Vielen Dank & Liebe Grüße,
Kati
Zitieren
#2
Nicht überall das gleiche posten das  macht man doch nicht  Dodgy
Zitieren
#3
Danke für den überaus hilfreichen Tipp. 
Wieso macht man das nicht? Wäre doch möglich, dass in einem Forum andere Leute sind, die andere Dinge wissen.

Da dies nun geklärt ist, zurück zu dem eigentlichen Thema:
Hier ist der HTML Code zu dem JavaScript, die Seite ist aktuell nicht online:

Code:
HTML

<div class="slideshow-container">
 <div class="sports_ausfluege_slider1 slide-effekt">
   <img src="bild1.jpg" style="width:100%">
 </div>

 <div class="arrows">
 <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
 <a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>


<div class="slideshow-container">
 <div class="sports_ausfluege_slider2">
   <img src="bild2.jpg" style="width:100%">
 </div>

 <div class="arrows">
 <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
 <a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>


<div class="slideshow-container">
 <div class="sports_ausfluege_slider3">
   <img src="bild3.jpg" style="width:100%">
 </div>

 <div class="arrows">
 <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
 <a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>


JAVA


<script>
var slideIndex = [1,1,1];
var slideId = ["sports_ausfluege_slider1", "sports_ausfluege_slider2", "sports_ausfluege_slider3"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
 showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
 var i;
 var x = document.getElementsByClassName(slideId[no]);
 if (n > x.length) {slideIndex[no] = 1}    
 if (n < 1) {slideIndex[no] = x.length}
 for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
 }
 x[slideIndex[no]-1].style.display = "block";  
}
</script>


CSS


.slideshow-container {
 width: 100%;
 margin: auto;
 margin-bottom: 28%;
}

.sports_ausfluege_slider1, .sports_ausfluege_slider2, .sports_ausfluege_slider3, .sports_pole_slider {
 display: none;
}

.arrows {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-top: -31%;
}

.prev, .next {
 cursor: pointer;
 padding: 16px;
 color: #cacaca;
 font-weight: bold;
 font-size: 37px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
}

.next {
 border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
 background-color: #f1f1f1;
 color: black;
}

Danke.
Grüße,
Kati
Zitieren
#4
warum man das nicht macht?
Weil ich dir schon im anderen Forum eine Antwort gegeben habe.
Nun weiß ich nicht in welchen Forum du dich rumtreibst.
Fals du meine Antwort im anderen forum gelesen hast ,und beantwortest hast schreibe ich da weiter .
Fals nicht ,suche ich das gerade aus und gebe dir antwort hier nochmal.

Das ist nicht böse gemeint ,ist immer nur nee blöde sache wenn man über mehrere Forums mit einander spricht
Zitieren
#5
Hallo, dann bleiben wir gerne in dem Forum. Den ganzen zusammenhängenden Code habe ich bereits gepostet. Irgendwelche Tips dazu?
Danke & LG,
Kati
Zitieren
#6
gut. was geht den daran nicht. weil mit den code kann ich jetzt nicht viel anfangen. hast du in jeden slider nur ein bild?? deswegen kann ich das schlecht testen so. es werden ja alle 3 Slider angezeigt wenn man da noch was zufügt . Css müsste man auch noch etwas ändern.
online ist es ja noch nicht sagtest du . Ist das den dein kompletter Code ?? Du solltest mal nach gleichen id`s und so suchen ,wenn du das hast das macht ja auch solche Fehler. Ansonsten poste mal einen Vollständigen Code mit mindestens 2 Bilder drine,weil selber alles zusammen bauen ist etwas doof auf dem Handy.Habe erst Wochenende wieder vernünftigen Pc zum vernünftigen Coden
Zitieren
#7
Hey, eigentlich wollte ich nur wissen, ob vom JavaScript Code alles richtig ist. z.B. das:
showSlides(1, 0);
showSlides(1, 1);

Muss da bei 3 Slidern nichts hinzugefügt werden?
Wenn beim script alles passt, weiß ich, dass der Fehler wo anders liegen muss.
Zitieren
#8
in deinen fall solltest du wohl ein dritten zu fügen wenn du nicht den Code ändern willst
Das sollte klappen
showSlides(1, 2);

Könnte sein das du danach noch in der Css was ändern mußt ,fals die Slider übereinander liegen mußt du die positionen noch anpassen.
Zitieren


Gehe zu:


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