Bom dia,
A minha dúvida é, neste html que agora apresento abaixo:
Código :
A ideia neste bocado de código, é fazer um slider, em que os 'a' são setas que apenas aparecem em mobile. E aparece de slide em slide(ou seja, de div em div).
O meu problema é saber distingui-los, isto é: Quando eu estou activo num único, e nos outros não. O meu código em jQuery:
Código :
Com este código, consigo andar para frente e para trás em Mobile. Mas imaginemos que cada div destas, tem uma imagem diferente, e essa tem sempre a mesma classe. O que queria é se é possível adicionar no botão de click, saber qual está ligado (ou seja, quando apenas mostrar a 1ª div, tudo o resto tem de ficar hidden, quando tive na 2ª div, a 1ªdiv tem de ficar hidden, a 3ª,4ª,5ª div também de ficar hidden e por aí adiante.
Caso não entendam a dúvida, por favor, perguntem
Obrigado
Pedro Cruz
A minha dúvida é, neste html que agora apresento abaixo:
Código :
<div class="swiper-wrapper text-center" id="beScrollable">
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_1">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_1">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_2">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_3">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_4">...</div>
</div>
<a id="prevThumb"></a>
<a id="nextThumb"></a>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_1">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_1">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_2">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_3">...</div>
<div class="swiper-slide ProgramsGridBack-MMI bgProgramsGrid-MMI" idofchannel="Channel_4">...</div>
</div>
<a id="prevThumb"></a>
<a id="nextThumb"></a>
A ideia neste bocado de código, é fazer um slider, em que os 'a' são setas que apenas aparecem em mobile. E aparece de slide em slide(ou seja, de div em div).
O meu problema é saber distingui-los, isto é: Quando eu estou activo num único, e nos outros não. O meu código em jQuery:
Código :
(document).on("click", "#prevThumb", function() {
var leftPos = $("#beScrollable").scrollLeft();
if ($("#beScrollable").scrollLeft() > "0") {
$("#beScrollable").animate({scrollLeft: leftPos - $("#beScrollable .swiper-slide").outerWidth(true)}, 300);
}
else {
event.preventDefault();
}
});
$(document).on("click", "#nextThumb", function() {
//ETR.ProgramsGrid.pvt_TableHeaderTime('TableTimeProgramsGrid-MMI');
var leftPos = $("#beScrollable").scrollLeft();
if (leftPos < $("#beScrollable")[0].scrollWidth) {
$("#beScrollable").animate({scrollLeft: leftPos + $("#beScrollable .swiper-slide").outerWidth(true)}, 300);
}
else {
event.preventDefault();
}
});
var leftPos = $("#beScrollable").scrollLeft();
if ($("#beScrollable").scrollLeft() > "0") {
$("#beScrollable").animate({scrollLeft: leftPos - $("#beScrollable .swiper-slide").outerWidth(true)}, 300);
}
else {
event.preventDefault();
}
});
$(document).on("click", "#nextThumb", function() {
//ETR.ProgramsGrid.pvt_TableHeaderTime('TableTimeProgramsGrid-MMI');
var leftPos = $("#beScrollable").scrollLeft();
if (leftPos < $("#beScrollable")[0].scrollWidth) {
$("#beScrollable").animate({scrollLeft: leftPos + $("#beScrollable .swiper-slide").outerWidth(true)}, 300);
}
else {
event.preventDefault();
}
});
Com este código, consigo andar para frente e para trás em Mobile. Mas imaginemos que cada div destas, tem uma imagem diferente, e essa tem sempre a mesma classe. O que queria é se é possível adicionar no botão de click, saber qual está ligado (ou seja, quando apenas mostrar a 1ª div, tudo o resto tem de ficar hidden, quando tive na 2ª div, a 1ªdiv tem de ficar hidden, a 3ª,4ª,5ª div também de ficar hidden e por aí adiante.
Caso não entendam a dúvida, por favor, perguntem
Obrigado
Pedro Cruz