Atualmente tenho trabalho em um portfólio de um escritório de arquitetura que é bem puxado para o frontend por conta das variadas maneiras de interação com o conteúdo. No post de hoje, quero compartilhar com vocês um snippet de Javascript que utilizei para construir um slider que carrega suas imagens uma a uma.
Para deixarmos claro, slider são aquelas interações que já estamos acostumados a ver e que fazem transições percorrendo imagem por imagem em uma lista de imagens a serem apresentadas. O carregamento das imagens preguiçoso, conhecido como lazyload, é uma técnica em que as imagens só são carregadas quando o usuário deseja vê-las. Isso é útil para tornar a página mais leve diminuindo o número de requisições iniciais que o browser precisa fazer para renderizar a página.
O script que junta essas duas ideias foi resultado de uma adaptação de um código que faz de um slider simples junto ao conceito desse plugin e do código do Pedro Menezes para fazer lazyload de imagens utilizando a jQuery. Além disso, ainda faço um controle de exibição dos botões que fazem a interação de próxima e anterior com o slider. Então, o resultado desse trabalho foi esse – vale dizer que não sou grande conhecedor de Javascript e jQuery:
Para ver um exemplo bem simples do funcionamento do script, você pode acessar esse link do JsFiddle e clicar no botão “Run” na parte superior esquerda. Não conhecia essa ferramenta e achei muito legal para validar pequenas lógicas com Javascript e jQuery. Valeu Morada!
Estou começando a me interessar mais sobre desenvolvimento em frontend e, principalmente, por jQuery e Javascript. Portanto, espero que tenhamos novos posts sobre o assunto em breve. Até a próxima, para nossa alegria!
