Muitas pessoas em seu próprio site querem ver sliders - são blocos que exibem um elemento de conteúdo na tela e, após um certo período de tempo, mudam esse conteúdo para outro. Naturalmente, todo desenvolvedor web pode criar um controle deslizante de forma independente usando HTML, CSS e JavaScript, mas isso nem sempre faz sentido. Você gastará bastante tempo, apesar de existirem algumas soluções prontas na Internet que facilitam muito sua vida e tornam seu site muito mais atraente. Este artigo se concentrará em uma dessas soluções chamada Owl Carousel. Configurar este controle deslizante é incrivelmente simples, então até mesmo um iniciante pode lidar com isso. Agora você aprenderá o que é esse controle deslizante, além de outros detalhes importantes. A configuração do Owl Carousel é um processo passo a passo, portanto, você deve estudar este material apenas na ordem.
O que é e por que você deve escolher este controle deslizante específico?
Owl Carousel, cuja configuração será discutida neste artigo, é um plugin muito eficaz que adiciona um slider bonito e conveniente à sua página, o que facilitará muito seu trabalho no site,economizando muito tempo, esforço e dinheiro. Quais são as vantagens deste plugin em particular, porque existem muitos controles deslizantes na Web? O fato é que este controle deslizante oferece dezenas de opções de personalização, que permitirão tornar sua página única e inimitável. É um plugin responsivo que funcionará em todas as versões do navegador e pode ser facilmente conectado ao WordPress e outros CMS populares. Em geral, esse controle deslizante tem muitas vantagens, então você deve definitivamente fazer uma escolha a seu favor. No entanto, antes de começar a configurar o Owl Carousel, este plugin ainda precisa ser carregado.
Baixar
Configurar o Owl Carousel 2 não é possível se você não o tiver baixado para o seu computador, e como esta é uma instrução passo a passo, você deve começar desde o início. Portanto, o programa pode ser baixado usando gerenciadores de pacotes, mas essas são ferramentas avançadas de desenvolvedor, então aqui mostraremos como obter esse plug-in da maneira padrão. Você precisa ir ao site oficial do plugin e baixar sua versão mais recente. Depois disso, todos os arquivos baixados devem ser transferidos para o diretório do seu site, preparando uma pasta conveniente, que tem o mesmo nome do próprio plugin. Observe que este plugin é fornecido com jQuery, então você precisa ter essa biblioteca disponível também. Bem, uma vez que você tenha baixado este plugin, você precisará cuidar do próximo passo que é configurar o slider Owl Carousel 2.
CSS
BAs configurações do Owl Carousel 1.3 permanecem quase as mesmas da versão 2 mais recente, apenas novos recursos são adicionados. No entanto, as informações básicas serão as mesmas, começando com a adição de CSS ao seu documento. Então o primeiro passo é adicionar a linha. O que ela te dá? Esta é uma string que carrega os estilos necessários ao site para exibir o controle deslizante. É aqui que você pode terminar fazendo o processamento visual por conta própria. No entanto, existe uma solução mais conveniente e rápida. Você também pode adicionar uma linha que também carrega o tema padrão do controle deslizante, tornando-o instantaneamente pronto para uso. Você pode editar alguns dos estilos para tornar seu controle deslizante mais exclusivo e diferente e mais adequado ao seu conteúdo. Naturalmente, as configurações do Owl Carousel em russo seriam muito convenientes, mas toda pessoa que cria sites deve entender que não pode prescindir do conhecimento de inglês.
Conexão JavaSpript
Claro, o slider não funcionará sem JS, então você também deve ter o cuidado de incluir o arquivo apropriado contendo o código necessário. Para fazer isso, você precisa inserir uma linha de código da documentação, no entanto, uma condição deve ser atendida. Todo mundo sabe que JS é uma linguagem de programação que executa todos os comandos em ordem, então neste caso você deve adicionar esta linha de código após a linha que adiciona a biblioteca jQuery ao seu documento. Mais com JS no caso deste slider, você não tem nada a vernecessidade.
codificação HTML
Bem, você conectou o controle deslizante, agora é hora de projetá-lo e personalizá-lo. Em primeiro lugar, você precisa escrever o código HTML para que o controle deslizante apareça em sua página. Para fazer isso, você precisa criar um contêiner que conterá os slides. Isso pode ser feito usando a tag div, que precisa ser atribuída à classe owl-carousel. É essa classe que garante que todos os estilos relacionados ao controle deslizante sejam ativados. Você também pode escrever outra classe - tema coruja. Será útil se você decidir usar o design padrão ou usar a versão padrão do controle deslizante como base para trabalhos futuros.
Então você precisa adicionar cada slide em um contêiner separado com uma tag div. Claro, você pode usar outras tags, mas essa é a melhor para controles deslizantes.
Plugin de chamada
E a última coisa que você precisa fazer para ter um slider pronto em seu site é usar este bloco de código:
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Assegura que o slider comece a funcionar, ou seja, rolar pelo conteúdo, quando sua página for carregada. Com o mesmo código, você pode conectar o Owl Carousel ao WordPress. As configurações deste plugin são numerosas e variadas, e agora você aprenderá sobre os pontos mais importantes.
Definindo a aparência e a funcionalidade do controle deslizante
Então, quais comandos você pode usar para personalizar seu controle deslizante? Antes de tudo, você precisa se lembrar do comando items, pois com ele você pode definir um número específico de slides em seu slider. O comando loop permitirá que você escolha se deseja fazer um loop no controle deslizante ou interromper a rolagem no último elemento. Há também o comando Arrastar, que possui várias opções, como mouse e toque. No primeiro caso, você pode fazer com que os elementos do seu controle deslizante possam ser deslizados com o mouse pressionado e, no segundo caso, com a ajuda de um toque (este comando é adequado para dispositivos móveis). Outro comando importante é o nav, que permite a exibição de setas de navegação. Junto com ele, você pode usar o comando navText para adicionar rótulos aos botões de navegação. Além disso, você não deve esquecer o comando de reprodução automática, que permite ativar e desativar o início automático de girar os slides do seu controle deslizante quando a página é carregada. Com este comando, você também pode usar o autoplayTimeout, para o qual você pode definir um valor específico em milissegundos, que determinará o tempo entre o giro automático de cada um dos slides.
Se você usa web design responsivo, ou seja, o design da sua página muda automaticamente dependendo do dispositivo em que ela é visualizada, então você definitivamente precisa se lembrar do comando responsivo, que permite definir o número de slides para exibir dependendo da largura da tela em que a página está sendo visualizada.
