O código no exemplo acima deve parecer familiar. É muito semelhante ao que já discutimos. A única diferença é que inicializamos nosso slider com algumas opções de configuração suportadas pela biblioteca bxSlider. Vamos dar uma olhada nesse trecho.
$('.slider').bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 600,
mode: 'fade',
captions: true,
speed: 1000
});
o autoControls Parâmetro
o autoControls O parâmetro adiciona controles que permitem aos usuários iniciar e parar a apresentação de slides. Por padrão, é definido como falseportanto, se você deseja mostrar os controles, precisa configurá-lo para true explicitamente.
o auto Parâmetro
o auto O parâmetro permite iniciar a apresentação de slides automaticamente no carregamento da página. Por padrão, é definido como false.
o pager Parâmetro
o pager O parâmetro adiciona um pager à apresentação de slides.
o slideWidth Parâmetro
o slideWidth O parâmetro permite definir a largura da apresentação de slides. Se você estiver usando o horizontal opção para sua apresentação de slides, este parâmetro é obrigatório.
o mode Parâmetro
o mode O parâmetro permite configurar o tipo de transição entre os slides. Você tem três opções para escolher—horizontal, verticale fade. No exemplo acima, usamos o fade opção, então você verá um efeito de esmaecimento ao mudar de um slide para outro.
o captions Parâmetro
o captions O parâmetro é usado se você deseja exibir um título com cada slide. Os títulos são obtidos do elemento de imagem title atributo. Como você pode ver, nós fornecemos um title atributo para todas as imagens em nosso exemplo.
o speed Parâmetro
o speed O parâmetro permite configurar a duração da transição do slide e é definido em milissegundos. Em nosso exemplo, configuramos para 1000então os slides serão girados a cada segundo.
O bxSlider tem várias outras opções de configuração – você pode aprender sobre elas na documentação oficial de opções do bxSlider. Vá em frente e explore as diferentes opções disponíveis na biblioteca bxSlider. Ele também oferece muitas possibilidades de personalização com métodos de retorno de chamada JavaScript.
Conclusão
Hoje, discutimos como você pode configurar um controle deslizante básico usando a biblioteca jQuery. Para fins de demonstração, escolhemos a biblioteca bxSlider, construída sobre a biblioteca jQuery. Também construímos um exemplo do mundo real usando uma variedade de opções de configuração fornecidas pela biblioteca bxSlider.
Se você já trabalhou com bibliotecas de sliders baseadas em jQuery, adoraria saber sua opinião! Sinta-se à vontade para compartilhar seus pensamentos usando o feed abaixo.
