Muitas pessoas em seu próprio site querem verOs controles deslizantes são blocos que exibem um elemento de conteúdo na tela e, após um determinado período, alteram esse conteúdo para outro. Naturalmente, todo desenvolvedor web é capaz de criar um slider por conta própria usando HTML, CSS e JavaScript, mas isso nem sempre faz sentido. Você passará bastante tempo, embora haja algumas soluções prontas na Internet que facilitam muito sua vida e tornam seu site muito mais atraente. Neste artigo, discutiremos uma dessas soluções, chamada Carrossel da Coruja. Configurar este controle deslizante é incrivelmente simples, então até mesmo um iniciante pode lidar com isso. Agora você descobrirá o que esse slider representa, além de outros detalhes importantes. A configuração do Carrossel da Coruja é feita passo a passo, portanto você deve estudar este material apenas em ordem.
O que é e por que vale a pena escolher este slider?
Carrossel da Coruja, cuja configuração seráconsiderado neste artigo, é um plug-in muito eficaz que adiciona à sua página um controle deslizante agradável e conveniente que facilitará muito o seu trabalho no site, permitindo que você economize muito tempo, esforço e dinheiro. Quais são as vantagens deste plug-in específico, porque há muitos sliders na web? O fato é que esse controle oferece várias opções de personalização, o que permitirá que você torne sua página única e irrepetível. Este é um plugin adaptável que funcionará em todas as versões de navegadores, e pode ser facilmente conectado ao WordPress e a outros CMSs populares. Em geral, as vantagens deste slider são muito, então você deve definitivamente fazer uma escolha a seu favor. No entanto, antes de começar a configurar o Owl Carousel, esse plug-in precisa ser baixado.
Baixar
A configuração do Carrossel de Corujas 2 não é possível se você nãobaixado para o seu computador, e desde que esta é uma instrução passo a passo, vale a pena começar desde o início. Assim, o programa pode ser baixado com a ajuda de gerenciadores de pacotes, mas estas são ferramentas avançadas para desenvolvedores, então aqui será dito como obter este plugin 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 é chamada igual ao próprio plugin. Note que este plugin está associado ao jQuery, então você também precisa ter esta biblioteca disponível. Bem, quando você baixar este plug-in, você precisará dar o próximo passo, ou seja, a configuração do slider do Owl Carrossel 2.
CSS
No Carrossel da Coruja 1.3 configurações permanecem quase as mesmas que na segunda versão mais recente, apenas novas funções são adicionadas. 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 uma linha ao código HTML . O que ela te dá?Esta é uma string que carrega os estilos necessários para o site para exibir o controle deslizante. Neste ponto, você pode terminar envolvendo-se no processamento visual. 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ãocontrole deslizante, o que torna instantaneamente pronto para uso. Você pode editar alguns estilos, tornando seu controle deslizante mais exclusivo e incomum, além de mais adequado ao seu conteúdo. Naturalmente, as configurações do Carrossel Coruja em russo seriam muito convenientes, mas cada pessoa que cria sites deveria entender que ele não pode prescindir do conhecimento de inglês.
Conexão Javascript
Naturalmente, o controle deslizante não funcionará sem JS,portanto, você também precisa 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, com a observância obrigatória de uma condição.Todo mundo sabe que JS é uma linguagem de programação que executa todos os comandos em ordem, respectivamente, neste caso você deve adicionar esta linha de código após a linha que adiciona a biblioteca jQuery ao seu documento. Você não precisa fazer mais nada com o JS no caso deste controle deslizante.
Formatação HTML
Bem, você ligou o controle deslizante, agora é a horapara emiti-lo e configurá-lo. Primeiro de tudo, você precisa escrever o código HTML para que o controle deslizante apareça na sua página. Para fazer isso, você precisa criar um contêiner que contenha os slides. Isso pode ser feito usando a tag div, que precisa ser atribuída à classe owl-carrossel. É essa classe que garante que todos os estilos pertencentes ao controle deslizante serão ativados. Você também pode registrar outra classe - owl-theme. É útil para você no caso de você decidir usar o design padrão ou ter tomado a versão padrão do controle deslizante como base para trabalhos futuros.
Em seguida, você precisa adicionar cada slide em um contêiner separado com uma tag div. Naturalmente, você pode usar outras tags, mas essa tag é mais adequada para sliders.
Chamada de plugin
Bem, a última coisa que você precisa fazer para que um controle deslizante pronto apareça em seu site é usar este bloco de código:
$ (document) .ready (function () {
$ (". carrossel da coruja"). carrossel da coruja ();
});
Isso garante que o controle deslizante comecefunção, ou seja, rolar o conteúdo quando sua página carrega. Com o mesmo código, você pode conectar o Owl Carousel ao WordPress. As configurações para este plugin são muitas e variadas, e agora você aprenderá sobre os pontos mais importantes.
Personalização da aparência e funcionalidade do controle deslizante
Então, quais comandos você pode usar,personalizar seu controle deslizante? Em primeiro lugar, você precisa se lembrar do comando de itens, pois com ele você pode definir um número específico de slides em seu controle deslizante. O comando loop permitirá que você escolha se deseja fazer um loop no controle deslizante ou parar de rolar no último elemento. Existe também um 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 girados com o mouse pressionado e, no segundo caso, com a ajuda de um toque (este comando é adequado para dispositivos móveis). Outro comando importante é 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 se esquecer do comando autoplay, que permite ligar e desligar o início automático de girar seus slides deslizantes no carregamento da página. Junto com este comando, você também pode usar autoplayTimeout, para o qual você pode definir um valor específico em milissegundos que determinará o tempo entre a inversão automática de cada um dos slides.
Se você estiver usando um web design responsivo,Se o design da sua página muda automaticamente dependendo do dispositivo em que é visualizada, então você definitivamente precisa se lembrar do comando responsivo, que permite definir o número de slides exibidos dependendo da largura da tela em que a página é visualizada.
