Wie Call-to-Action Buttons in Slider einbauen?

Hi,

ich baue seit einigen Monaten an einer Webseite mit HTML, CSS, ein wenig JavaScript (ehrlicherweise entnommen aus W3 Schools) und später auch noch etwas PHP & MySQL.

Momentan versuche ich, einen Call-to-Action Button in meinen Slider einzubinden, welcher von Banner zu Banner eine andere Verlinkung haben soll. Das funktioniert auch, allerdings werden die anderen Buttons, die nicht angezeigt werden sollen, unter den Banner gedrückt und angezeigt.

Meine Idee war es, die Banner als Hero-Image und die Buttons als Hero-Text einzupflegen. Das verursacht aber die genannten Probleme. Habt ihr Vermutungen, woran das liegen könnte oder kennt ihr einen einfacheren Weg als meinen gewählten?

Wenn es nicht anders geht, ändere ich das HTML Script auch noch einmal (Meine Website ist so wieso nicht Online.).

Answer 1

[Destranix]

Ich bin mir nicht sicher, was genau du meinst, aber Verstecken kannst du Buttons, indem du ihr CSS "display"-Attribut auf "none" setzt.

In Javascript setzt du das um, indem du die Klasse des elements änderst.

Beispielsweise hast du eine CSS-Klasse "disabled-element":

.disabled-element{
    display: none;
}

In Javascript kannst du diese dann setzen und entfernen:

element.classList.add("disabled-element");
element.classList.remove("disabled-element");

Comments

[Tina156665]

Danke erst einmal für deine Hilfe!😊

Ich muss sagen, mit JavaScript kenne ich mich leider so gar nicht aus, weil ich das in der Schule noch nicht hatte.😅

Vielleicht ist es hilfreich, wenn ich mal den betroffenen Quellcode mit reinschreibe. Also das sieht bisher so aus (ich habe nur beispielhaft 2 Slides genommen und alle Bilder/Verlinkungen "Beispiel genannt"):

HTML:

<div class="w3-content w3-section" id="slide">
    
<div class="hero-image">

  <img class="mySlides" src="Beispiel.png" style="width:100%">
    
  <div class="hero-text">
          
    <form action="../sides/Beispiel.html">
        
      <input type="submit" name="absenden"
      value="Klicke hier!">
              
     </form>
              
     </div>
            
 </div>

<div class="hero-image">

  <img class="mySlides" src="Beispiel.png" style="width:100%">
    
  <div class="hero-text">
          
    <form action="../sides/Beispiel.html">
        
      <input type="submit" name="absenden"
      value="Klicke hier!">
              
     </form>
              
     </div>
            
 </div>
  
  
</div>

JavaScript:

<script>
    var myIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      myIndex++;
      if (myIndex > x.length) {myIndex = 1}    
      x[myIndex-1].style.display = "block";  
      setTimeout(carousel, 5000);                                                                    
    }
</script>

CSS:

#slide {
    
    max-width:100%;
    min-height: 350px;
    overflow: hidden;
    padding-top: 31px;
}

.hero-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 81%;
  left: 87%;
  transform: translate(-50%, -50%);
  color: white;

}

input[type=submit] {
    padding:7px 15px;
    background:#4169E1;
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
    color: white;
    font-family: arial;
    font-size: 50px;
}

[Destranix]

@Tina156665

Sollte so eigentlich funktionieren. Wenn nicht, dann schau mal in die Browserkonsole (mittels F12 kannst du die öffnen) ob du Fehlermeldungen erhälst.

[Tina156665]

@Destranix

Eine Fehlermelungen:

Uncaught ReferenceError: element is not defined

carousel Zeile 159: carousel();

[Destranix]

@Tina156665

Dann schaust du jetzt, worauf sich das beziehst, und versuchst herauszufinden, wieso das "undefined" ist.

[Tina156665]

@Destranix

Ich habe das schon gelöst. Das war mein Fehler...😅😂

Jedenfalls werden mir leider immer noch zwei Knöpfe ausgegeben. An richtiger Stelle der aktuelle und unter dem Banner der nächste...🙈

[Destranix]

@Tina156665

Du versteckst ja auch nur die Bilder und nicht die Knöpfe.

[Tina156665]

@Destranix

Hast du vielleicht Vorschläge/Tipps wie ich meinen Quellcode dahingehend erweitern kann?

Ich schätze das der JavaScript Teil erweitert werden muss. Nur kenne ich mich da nicht mehr wirklich aus...😅

[Destranix]

@Tina156665

Du musst nur den Klassennamen im JavaScript gegen "hero-image" austauschen soweit ich das sehe.

[Tina156665]

@Destranix

Okay, das war einfacher als gedacht.🙈😅

Vielen lieben Dank!❤😊