JQuery

Inscreva-se em nosso canal no Youtube Daviwp

Como criar um current no plugin bxslider

13/11/2013 JQuery (4) comentários

Olá Pessoal, esse script é útil para quem utiliza o plugin jQuery Bxslider fazendo algumas pesquisar não esta bem claro como utilizar a funcionalidade onSlideBefore: e onSliderLoad: então reunir aqui todo o código, lembrando este código abaixo é um exemplo que atendeu minha necessidade, os parâmetros que esta nesse código pode não atender a sua necessidade. A ideia é mostrar mais claro como utilizar onSlideBefore: e onSliderLoad: veja o código abaixo, qualquer duvida deixe seu comentário.

$('.bx-slider').bxSlider({
		  minSlides: 3,
		  maxSlides: 3,
		  moveSlides: 1,
		  slideWidth: 360,
		  slideMargin: 10,
		  infiniteLoop: true,
		  auto: true,			
			onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
			    $('.bx-slider li').removeClass('active-slide');
			    $('.bx-slider li').eq(currentSlideHtmlObject-11).addClass('active-slide')
			  },
			  onSliderLoad: function () {
			    $('.bx-slider li').eq(-11).addClass('active-slide')
			},
		 });

Pessoal é isso, o que esse código vai fazer é inserir essa class active-slide na li do seu slider. vou postar depois que ficar pronto o projeto que estamos desenvolvendo aqui na agência com esse slider.

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

  • Joaowo

    Legal o post cara… Parabéns!
    Mas eu tenho uma dúvida, será que tu consegue me ajudar com ela?
    Aí vai:
    Se eu tiver mais de um carrossel na página? #comofaz?
    Usando o mesmo nome de classe para os dois (“.bx-slider”), como selecionar o carrossel que esta recebendo o clique, assim alterando as classes dos slides do carrossel em questão, ao invés de alterar do outro possível carrossel que ocupe a mesma página?

    • daviwp

      Olá João, basta duplicar o $(‘.bx-slider’).bxSlider({ com outro nome não precisa copiar todos os parâmetros caso não vá utilizar no segundo carrossel.

      • Joaowo

        É vai ter que ser… minha dúvida era justamente usando o mesmo nome, até porque os 2 são iguais. 😛
        Obrigado pela rápida resposta 😀
        Abs

        • daviwp

          Se for igual pode utilizar o mesmo nome e o mesmo código não precisa duplicar.