Well, I've been developing a kind of content slider that swaps content from a certain div ('.item .frase-test')
to the content of the next item in the order of <span>
.
I was able to do everything I needed to be done so far, but a catch prevents me from completing everything.
After running the script once in the active class in the loop, the counter in each item does not work, I've tried using different indexes and everything else for each one, but nothing done ...
I've temporarily hosted here: link and as you can see, the loop continues, and the functions also agree, but the circle around does not.
EDIT:
$(function () {
var spin = function() {
$('.btn-ativo').circleProgress({
value: 1,
size: 79,
fill: { color: "#bfd432" },
animation: { duration: 1000 }
}).on('circle-animation-end', function (event) {
$(this + 'canvas').fadeOut(300);
});
};
$('.btn-item').on('click', function () {
var btn = $('.btnss').parent();
var self = this;
var parent = $('.items').parent();
var id = $(this).data('id');
var mostrar = parent.find('.' + id);
$('.btn-item.btn-ativo').removeClass('btn-ativo');
$(this).addClass('btn-ativo');
parent.find('.ativo').fadeOut(200, function () {
$(this).removeClass('ativo');
});
$(parent).fadeIn(400, function () {
$(this).addClass('ativo');
});
$(mostrar).addClass('ativo', 400);
});
setInterval(function () {
$('.btnss').parent().find('.btn-item.btn-ativo').removeClass('btn-ativo').next().addClass('btn-ativo');
if ($('.btn-item.btn-ativo').hasClass('last')) {
$('#item').addClass('btn-ativo');
}
if ($('#item').hasClass('.btn-ativo')) {
$('.item span').toggleClass('ativo');
}
$('.item').parent().find('.ativo').fadeOut(200, function () {
$(this).removeClass('ativo');
});
$('.' + $('.btn-item.btn-ativo').data('id')).fadeIn(200, function () {
$(this).addClass('ativo');
});
spin();
}, 1000);
$('.item').height($('.item span').height() + 60);
spin();
});
body {
padding-top:40px;
}
.frase-test {
background-color:#ccc;
background-size:contain;
width:100%;
height:auto;
background-position:center center;
font-size:25px;
position:relative;
}
.frase-test span {
display: none;
position:absolute;
top:0;
left:0;
padding:30px;
}
.ativo {
display:block !important;
}
.user {
position:relative;
}
.user-info {
position:absolute;
top:0;
left:0;
right:0;
}
.user-info span {
display:none;
position:absolute;
top:0 !important;
left:0;
right:0;
margin:auto 0;
}
.btn-group {
position:absolute;
bottom:30px !important;
}
.btn-ativo {
pointer-events:none !important;
}
*:focus {
outline:none !important;
}
.btn {
background-color:transparent !important;
border:none !important;
position:absolute;
margin-right:30px;
}
.btn span, .btn canvas {
position:absolute;
top:10;
left:10;
}
.carre {
width:79px;
height:79px;
position:relative;
display:inline-block;
}
.carre span {
position:absolute;
bottom:53px !important;
position:absolute !important;
top:15px;
left:31px;
background: transparent;
text-align: center;
font-size:36px !important;
cursor:pointer;
display:inline-block;
color:#000;
}
.btn-ativo span {
color:#bfd432 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://kottenator.github.io/jquery-circle-progress/dist/circle-progress.js"></script>
<div class="container items">
<div class="row">
<div class="col-md-12">
<!-- ITEM 1 (ativo by default) -->
<div class="item frase-test text-center">
<span class="ativo item1">
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim.
</span>
<span class="item2">
Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</span>
<span class="item3">
adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</span>
<span class="item4">
Mussum ipsum cacilds, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</span>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-12">
<div class="item user">
<div class="user-info">
<span class="ativo text-center item1 test-item">
<img src="http://placehold.it/150x150"class="img-circle center-block">
<h3>John Doe</h3>
Diretor Criativo
</span>
<span class="text-center item2 test-item">
<img src="http://placehold.it/150x150"class="img-circle center-block">
<h3>John Doe 2</h3>
Diretor Criativo
</span>
<span class="text-center item3 test-item">
<img src="http://placehold.it/150x150"class="img-circle center-block">
<h3>John Doe 3</h3>
Diretor Criativo
</span>
<span class="text-center item4 test-item">
<img src="http://placehold.it/150x150"class="img-circle center-block">
<h3>John Doe 4</h3>
Diretor Criativo
</span>
</div>
</div>
</div>
</div>
<div class="btnss">
<a id="item" data-id="item1" data-single="1" class="btn-item carre btn-ativo 1"><span>1</span></a>
<a id="item" data-id="item2" data-single="2" class="btn-item carre 2"><span>2</span></a>
<a id="item" data-id="item3" data-single="3" class="btn-item carre 3"><span>3</span></a>
<a id="item" data-id="item4" data-single="4" class="btn-item carre 4"><span>4</span></a>
<a id="item" class="btn-item carre last hidden"><span></span></a>
</div>
</div>
For the spinner, I use the following plugin: link
Thank you!