nanande nanande - 3 months ago 18
Javascript Question

Hightlighting pagination in slideshow (SOLVED)

[SOLVED]


I want my slideshow to highlight the pagination point which is linked to the active slide. The additional class I want to be added is

.pshowing
, but everything I tried didn't do anything at all.


Here's the code:
https://jsfiddle.net/jt1bj6k5/17/

Thanks a lot to anybody who tries to help me!

Answer

Updated The code check it

$(document).ready(function() {

var startSlideShow;
var slides = document.querySelectorAll('#slides .slide');
var pagina = document.querySelectorAll('.pagina');
var currentSlide = 0;

slideInterval(true);

var next = document.getElementById('pfeil_r');
var previous = document.getElementById('pfeil_l');


$('.pagina').on('click',function(){
    var curr = $(this).index();
    slideInterval(false);
    goToSlide(curr);
    slideInterval(true);      
});

function slideInterval(check)
{
   if(check){
       startSlideShow = setInterval(nextSlide,5500);
   } else{
        clearInterval(startSlideShow);
   }
}

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

function previousSlide() {
    goToSlide(currentSlide-1);
}

function goToSlide(n) {
    slides[currentSlide].className = 'slide';
    pagina[currentSlide].className = 'pagina';
    currentSlide = (n+slides.length)%slides.length;
    slides[currentSlide].className = 'slide showing';
    pagina[currentSlide].className = 'pagina pshowing';
}
pfeil_r.onclick = function() {
    slideInterval(false);
    nextSlide();
    slideInterval(true);  
};

pfeil_l.onclick = function() {
    slideInterval(false);
    previousSlide();
    slideInterval(true);  
};

});
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic);

@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);

body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

#slides {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    list-style-type: none;
}


.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    font-size: 40px;
    box-sizing: border-box;
    background: #333;

    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
}

.showing {
    opacity: 1;
    z-index: 2;
}

.slide:nth-of-type(1) {
    background: orange;
}
.slide:nth-of-type(2) {
    background: blue;
}
.slide:nth-of-type(3) {
    background: red;
}
.slide:nth-of-type(4) {
    background: green;
}
.slide:nth-of-type(5) {
    background: purple;
}

button#pfeil_r {
    top:50%;
    right:20px;
    position:absolute;
    height:50px;
    width:50px;
    z-index:100;
  border-radius:50%;
  border-style:none;
  background-color:#333;
  opacity:0.8;
}

button#pfeil_l{
    top:50%;
    left:20px;
    position:absolute;
    height:50px;
    width:50px;
    z-index:100;
  border-radius:50%;
  border-style:none;
  background-color:#333;
  opacity:0.8;
}

#pagina {
    position:absolute;
    height:auto;
    width:100%;
    bottom:0;
    margin-bottom:80px;
    list-style-type: none;
    background-color:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:800;
}


.pagina {
    position:relative;
    width:10px;
    height:10px;
    opacity: 0.8;
    z-index: 800;
    box-sizing: border-box;
    background-color: #333;
    border-radius:50%;
    border-style:solid;
    border-width:1px;
    border-color:#222;
    color:transparent;
    margin-left:5px;
    margin-right:5px;
    float:center;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.pagina:hover {
    background-color:#000;
    cursor:pointer;
}

.pshowing {
    background-color: #fff;
    border-color:#666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>

<button id="pfeil_l"></button><button id="pfeil_r"></button>

<div id="pagina">
    <div class="pagina paginashowing"></div>
    <div class="pagina"></div>
    <div class="pagina"></div>
    <div class="pagina"></div>
    <div class="pagina"></div>
</div>

<div id="slides">
    <div class="slide showing"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide">
    </div>
</div>

</body>

Comments