CODEWITHSUNDEEP
jquerycsscarouselimage-gallery
Jorge Rebelo
Jorge Rebelo

Reputation: 33

jquery gallery carrousel with dot

I am finishing an work for a Gallery Carousel, and i'm only stuck on the jquery function.

The gallery fades every 2.5 seconds, but when i click on a dot, i can remove the class active from the last one.

Anyone can help with that?

$(document).ready(function(){	
var contar = 2;
var remactive = 1;
var max_img =6;	

for(var i = 0; i < max_img; i++) {
    $('#' + i).click( pontos( i ) );
  }

setInterval(function(){
	passar (contar);
	contar++;
	remactive=contar-1;
	if(contar == max_img){
		contar=1;
		remactive=5;
		}
}, 2500);

function passar(){
	$(".img").attr('src', 'imagens/'+contar+'.jpg');
	$("#"+contar).addClass('activep');	$("#"+remactive).removeClass('activep');
				}
	
function pontos( i ){
  return function(){
	$(".img").attr('src', 'imagens/'+i+'.jpg');
	$("#"+i).addClass('activep');
	//inicia a contagem a partir do click
	 contar=i; 
	 remactive=i-1; // 
  }
  }

});
.galeria {

    /*width: 100%;*/
        }
			
.galeria img{
    text-align:center;
    width:100%;
        }
			
.ponto {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #b30039;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
				
        }
.activep {
    background-color: #4d0018;
        }

    /* Animação de fade */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
        }

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
        }

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
        }
.rodape {
    position: relative;
	z-index: 1;
	margin-top: -30px;
	margin-left: auto;
	margin-right: auto;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="galeria fade col-lg-4 col-md-8 col-sm-12">

		<img class="img" id="slideshow" src="imagens/1.jpg" />
			
		<div class="rodape" style="text-align:center" >
				<span id="1" class="ponto activep"></span> 
  				<span id="2" class="ponto"></span> 
  				<span id="3" class="ponto"></span>
				<span id="4" class="ponto"></span>
				<span id="5" class="ponto"></span> 
		</div>
</div>

Upvotes: 1

Views: 43

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

You need to change

$("#"+i).addClass('activep');

To

$("#"+i).siblings('.activep').removeClass('activep').end().addClass('activep');

The above will remove the activep from any sibling of the current element, and then add the class to it. You can remove the $("#"+remactive).removeClass('activep'); part if you use my suggestion.

Upvotes: 1

Related Questions