O autor já publicou um script de
carrossel , que também usa apenas CSS e Javascript. Agora vamos dar uma olhada no script slider. Difere do carrossel porque apenas um elemento é visível por vez, e não vários, e os elementos não rolam, mas são lentamente substituídos um pelo outro. E mais Nesse controle deslizante, apenas imagens (slides) são usadas como elementos; portanto, é chamado de controle deslizante de imagem simples.
A navegação é realizada pelas setas “Próximo elemento” ou “Elemento anterior” e pontos indicadores. Setas e pontos podem ser desativados nas configurações de script. Os elementos podem ser mostrados com uma parada no primeiro e no último elemento ou em um ciclo quando o último elemento for novamente seguido pelo primeiro. Você pode ativar a visualização automática (rolagem) de elementos, a duração da visualização (o intervalo entre alternar) é ajustável. Quando você passa o mouse sobre um item, a rolagem para.
O controle deslizante se ajusta automaticamente a qualquer largura de tela de qualquer dispositivo. Você pode verificar isso movendo para a esquerda ou direita um dos lados do navegador.
HTML - o código do controle deslizante é padrão, com exceção de um: uma tela é colocada na frente das imagens, que é uma imagem branca comum. Todas as imagens e a tela devem ter o mesmo tamanho. O número de imagens é arbitrário.
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
As tags <ul> <li> foram usadas como contêineres, mas você pode usar <div> <div> ou <div> <p>. Setas e pontos indicadores são posicionados absolutamente nos respectivos contêineres. Para setas, são utilizados padrões na forma de colchetes triangulares, que, se desejado, você pode substituir por seus próprios padrões. Os pontos são gerados pelo programa, o número de pontos é igual ao número de imagens.
Todas as imagens são empilhadas, uma acima da outra, com posicionamento absoluto no canto superior esquerdo do contêiner. A tela evita o colapso do recipiente externo. Todas as imagens recebem a propriedade CSS opacity: 0, exceto o primeiro elemento ao qual o programa de inicialização atribui opacity: 1, tornando-o visível.
Os elementos de rolagem são executados alterando suavemente a opacidade de 1 para 0 para o elemento visível e de 0 para 1 para o próximo elemento invisível. Assim, o elemento visível se torna invisível e o invisível visível. A suavidade da transição cria uma propriedade de transição com duração de 1s e uma função de transição fácil.
CSS img { width: 100%; !important; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
Para que o controle deslizante seja adaptável a qualquer largura da tela, para as imagens, você precisa especificar a largura da propriedade CSS: 100%. Para todos os contêineres de bloco (div, ul, li, etc.), também a largura: 100% ou, se você precisar de largura em unidades numéricas, somente a largura máxima ou a largura mínima.
Os estilos, como sempre, estão incluídos no cabeçalho. O script pode ser conectado no evento onload ou no final da marcação HTML. O arquivo de script do controle deslizante pode ficar assim:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> … </div> … <footer> … </footer> <script src="sim-slider.js"></script> <script>new Sim()</script> </body> </html>
O controle deslizante é chamado pelo nome da classe sim-slider ou pelo identificador. No segundo caso, você pode colocar vários controles deslizantes em uma página.
<div class="sim-slider" id="first"> … <div class="sim-slider" id="second"> … <script>new Sim("first"); new Sim("second");</script>
Javascript function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') };
Todas as imagens são tiradas de fontes abertas.Obrigado pela atenção!