Estoy creando un carrusel de fotos. Tengo una lista de varias fotos en miniatura pero solo son visibles 3 a la vez. Al hacer clic sobre una de ellas se muestra abajo en grande y con un texto.
Mi tema es la organización de estos tres elementos:
<p><</p>
lista de fotos
<p>></p>
El "botón" para avanzar me lo posiciona al final de la lista aunque las fotos no son visibles (display:none
). Mi idea es que el "botón" para avanzar quede al final de las 3 fotos visibles. En las imágenes creo que queda más claro.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-opacity-off";
}
var showNumber = 3;
var startPos = 0;
var endPos = showNumber;
var $List = $('ul li');
$List.hide().slice(startPos, endPos).fadeIn();
$('#adelante').click(function() {
if (endPos < $List.length) {
startPos = startPos + 1;
endPos = endPos + 1;
$List.hide().slice(startPos, endPos).fadeIn();
}
return false;
});
$('#atras').click(function() {
if (startPos > 0) {
startPos = startPos - 1;
endPos = endPos - 1;
$List.hide().slice(startPos, endPos).fadeIn();
}
return false;
});
@charset "utf-8";
li {
list-style-type: none;
}
div.w3-col {
padding-right: 5px;
}
.mySlides {
display: none
}
.demo {
cursor: pointer
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a id="atras" href="#" class="prev"><</a>
</div>
<div>
<ul>
<!-- Lista de seis fotos -->
<li>
<div class="w3-col s2">
<img src="https://public.slidesharecdn.com/images/user-48x48.png">
</div>
</li>
<li>
<div class="w3-col s2">
<img src="https://public.slidesharecdn.com/images/user-48x48.png">
</div>
</li>
<li>
<div class="w3-col s2">
<img src="https://public.slidesharecdn.com/images/user-48x48.png">
</li>
<li>
<div class="w3-col s2">
<img src="https://public.slidesharecdn.com/images/user-48x48.png">
</div>
</li>
<li>
<div class="w3-col s2">
<img src="https://public.slidesharecdn.com/images/user-48x48.png">
</div>
</li>
<li>
<div class="w3-col s2">
<img src="https://public.slidesharecdn.com/images/user-48x48.png">
</div>
</li>
</ul>
</div>
<div style="float:left; display:inline-block;">
<a id="adelante" href="#" class="next">></a>
</div>
mySlides
alul
y la clasedemo
a losli
(¿es eso correcto?) el código funciona sin problemas (y con las flechas donde quieres). Por favor, edita la pregunta para añadir tu código funcional en el que se pueda ver el problema.