Slideshow Dots manuelle Steuerung

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

martinatina

Neues Mitglied
26 August 2020
8
0
1
19
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

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
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.
 

martinatina

Neues Mitglied
26 August 2020
8
0
1
19
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.


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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Wenn ich mir das "Getting Started" ansehe, so wird dort auch jQuery eingebunden. Bei deinem Code sehe ich nichts davon. Versuche, das zu ergänzen:
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="circle.js"></script>
habe die Product version jetzt in das circle.js kopiert, war das falsch?
Falsch war das sicher nicht, aber persönlich würde ich es übersichtlicher finden, wenn das Javascript der Slideshow von deinem eigenen getrennt wäre.
 
Werbung:

Neueste Beiträge