• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slideshow Dots manuelle Steuerung

M

martinatina

Neues Mitglied
Guten Abend allerseits! :)

Ich habe auf meiner Website eine Slideshow, welche manuell aber auch automatisch läuft.
Meine Frage ist jetzt, wie verlinke ich die Punkte unten mit dem jeweiligen Bild der Slideshow?

Auf einer Seite benötige ich 2 dieser Slideshows untereinander, copy paste vom HTML code funktioniert wie ich schon feststellen konnte nicht :D Wie stelle ich das am besten an?


HTML: 
 <div class="slideshowContainer">

            <!-- Replace the image 'src' with the images in your project.
Javascript is set up so that you can add as many images as you like, but make sure that you match the number of 'circle' span elements (below) to the number of images -->

            <img class="imageSlides" src="Bilder/Buchinnen/Cover.jpg" alt="Cover">
            <img class="imageSlides" src="Bilder/Buchinnen/RoteInnenseite.jpg" alt="Buch Kunst im Stadtraum">
            <img class="imageSlides" src="Bilder/Buchinnen/Inhalt.jpg" alt="Inhaltsverzeichnis">
            <img class="imageSlides" src="Bilder/Buchinnen/AEIOU.jpg" alt="Kunstwerk AEIOU">
            <img class="imageSlides" src="Bilder/Buchinnen/Trompete.jpg" alt="Kunstwerk Connection">
            <img class="imageSlides" src="Bilder/Buchinnen/Kartenseite.jpg" alt="Karte">
            <img class="imageSlides" src="Bilder/Buchinnen/Awilda.jpg" alt="Awilda">
            <img class="imageSlides" src="Bilder/Buchinnen/Kuenstlerseite.jpg" alt="Künstlerseite">

          

            <img id="leftArrow" class="slideshowArrow" src="Bilder/pfeil1.png"/>
            <img id="rightArrow" class="slideshowArrow" src="Bilder/pfeil2.png"/>

            <div class="slideshowCircles">


                <span class="circle dot"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
                <span class="circle"></span>
            </div>

        </div>


    </div>
    
    
    
    
    
 <script src="app.js"></script>
</body>

CSS: 
.slideshowContainer {
  position: relative;
  overflow: hidden;
  margin: 50px 0 75px;
  width: 100%;
  height: 750px;
}

.imageSlides {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}

/* add 'visible' class via Javascript */
.visible {
  opacity: 1;
}

.slideshowArrow {
  font-size: 7em;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.slideshowArrow:hover {
  opacity: 0.75;
}

#leftArrow {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#rightArrow {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(50%, -50%);
}

.slideshowCircles {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.circle {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 1s ease-in-out;
}

.dot {
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px rgba(255, 255, 255, 0.5);
}

Javascript: 
// IMAGE SLIDES & CIRCLES ARRAYS, & COUNTER
var imageSlides;
var circles;
var leftArrow;
var rightArrow;
var imageSlideshowInterval;
var counter = 0;

// HIDE ALL IMAGES FUNCTION
function hideImages() {
  for (var i = 0; i < imageSlides.length; i++) {
    imageSlides[i].classList.remove('visible');
  }
}

// REMOVE ALL DOTS FUNCTION
function removeDots() {
  for (var i = 0; i < imageSlides.length; i++) {
    circles[i].classList.remove('dot');
  }
}

// SINGLE IMAGE LOOP/CIRCLES FUNCTION
function imageLoop() {
  var currentImage = imageSlides[counter];
  var currentDot = circles[counter];
  currentImage.classList.add('visible');
  removeDots();
  currentDot.classList.add('dot');
  counter++;
}

// LEFT & RIGHT ARROW FUNCTION & CLICK EVENT LISTENERS
function arrowClick(e) {
  var target = e.target;
  if (target == leftArrow) {
    clearInterval(imageSlideshowInterval);
    hideImages();
    removeDots();
    if (counter == 1) {
      counter = (imageSlides.length - 1);
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    } else {
      counter--;
      counter--;
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    }
  }
  else if (target == rightArrow) {
    clearInterval(imageSlideshowInterval);
    hideImages();
    removeDots();
    if (counter == imageSlides.length) {
      counter = 0;
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    } else {
      imageLoop();
      imageSlideshowInterval = setInterval(slideshow, 10000);
    }
  }
}



// IMAGE SLIDE FUNCTION
function slideshow() {
  if (counter < imageSlides.length) {
    imageLoop();
  } else {
    counter = 0;
    hideImages();
    imageLoop();
  }
}

document.addEventListener("DOMContentLoaded", init);

function init(){
    imageSlides = document.getElementsByClassName('imageSlides');
    circles = document.getElementsByClassName('circle');
    leftArrow = document.getElementById('leftArrow');
    rightArrow = document.getElementById('rightArrow');
    leftArrow.addEventListener('click', arrowClick);
    rightArrow.addEventListener('click', arrowClick);
    setTimeout(slideshow, 1000);
    imageSlideshowInterval = setInterval(slideshow, 10000);
}
 
Sempervivum schrieb:
Für das Advanced Custom Template musst Du nichts besonderes herunter laden. Dieser Ausdruck ist lang aber bezieht sich nur auf diese eine Zeile, die Du so übernehmen kannst:
data-cycle-pager-template="<a href='#'><img src='{{src}}' width=20 height=20></a>"
Die eigentliche Slideshow findest du unter Download:
Nimm die Production Version.
Zum Vergrößern anklicken....



HTML: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Titel</title>
   <script src="circle.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
</head>


<body>
    <header class="header">

        <p class="NAME"> <a class="name" href="index.html">X </a></p>


        <nav>

            <ul>

                <li><a href="about.html">X</a></li>
                <li><a href="projekte.html">X</a></li>

                <li><a href="kontakt.html">X</a></li>
            </ul>
        </nav>


    </header>

    <div class="wrapper">

        <h1>Überschrift</h1>
        <h2> Text</h2>
        
        
<div class="cycle-slideshow"
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#adv-custom-pager"
    data-cycle-pager-template="<a href='#'><img src='{{src}}' width=20 height=20></a>"
    >
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
<!-- empty element for pager links -->
<div id=adv-custom-pager class="center external"></div>
    </div>
    </body>
</html>





Ich sehe jetzt die Bilder aber keine slideshow, habe die Product version jetzt in das circle.js kopiert, war das falsch?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben