Conocer cual slider es visible en un carrusel con jquery

 

Para identificar cual slider es visible dentro de un carrusel con jquery se debe tener en cuenta el cálculo de cuantos slider existen en dicho carrusel.

Finalmente asignar a cada slider un id que lo identifique.

La clave es la propiedad aria-hidden de cada slider que en caso de ser false, es porque el slider está siendo visible para el usuario.

Crear un bucle for basado en el número de slider en el carrusel y comparar cual de estos, mediante el id, tiene la propiedad aria-hidden en false.

Con este id se puede crear un campo hidden en un form para enviarlo por get o post.

El siguiente ejemplo es válido para un carrusel cuyos slider tienen valores que necesitamos conocer cual es el de interés del usuario.

Jquery:

<script>

$(document).ready(function() {

var tslides = $('.slide').children().length; // Permite conocer la cantidad de sliders creados

$(document).click(function(event) { // Verifica que se ha presionado clic en el carrusel o se la deslizado a izquierda o derecha

for (let i = 1; i <= tslides; i++) { // Bucle de 1 a cantidad de sliders

if ($('#s' + i).attr('aria-hidden') == 'false') { // Comparar cual está visible

$('#pid').val(i); // Asignar a input el valor del id visible

}

}

});

});

</script>

html 

<div class="slide" id="s1">

<ul>

<li class="logo"><img src="images/icono1.png'"></li>

<li class="precio">$10 USD</li>

</ul>

</div>

<div class="slide" id="s2">

<ul>

<li class="logo"><img src="images/icono2.png'"></li>

<li class="precio">$6 USD</li>

</ul>

</div>

<input type="hidden" name="pid" id="pid"> // Aquí el campo que contiene el id del slide visible