Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Slider

Boa noite!

Gostaria de saber como posso fazer com que os sliders passem apenas arrastando o mouse por cima.

Minha intenção é no mobile não ter botões para passar o slide e o usuário o faça arrastando o dedo.

O slider que usei como base é esse:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2

É possivel ou teria que mudar a estrutura?

8 respostas

Para isso deve-se usar eventos de "touch", veja esta documentação: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

Outro ponto, pensando em UX, é preciso algo que indique/sinalize para o usuário que ele terá de "arrastar o dedo", já que isso não é o comum.

Você acha que teria de mudar a estrutura do slider, ou seria possivel manter para adicionar essa funcionalidade?

Então, como você quer fazer? Para o mobile, as setas para direita e esquerda não adiantam se o usuário terá que "passar" os slides com o dedo. Para mim é confuso essa funcionalidade ("passar com o dedo"), não a vejo frequentemente. Mas depende do seu público e do que você pretende com o resultado.

Na verdade não é nada incomum, haha. Um exemplo rapido que posso dar, é o site do globoesporte. Versão mobile não sem setas, apenas os dots.

Olá, boa tarde. Creio que para facilitar e economizar linhas, você poderia estar a usar framework de carrosel, que vem com tais funcionalidades. Recomendo o owl carousel.

http://www.landmarkmlp.com/js-plugin/owl.carousel/demos/one.html

A questão do prev e next você pode adicionar por conta em um media, onde após as resoluções do mobile terminarem eles entrariam em cena. Espero ter ajudado.

Ai sim, com os dots ok, acessei aq o site do globoesporte.

Cleiton, achei essa solução interessante. Unica coisa que o download esta indisponível :/

solução!

Acabei usando esse framework http://kenwheeler.github.io/slick/#go-get-it

De qualquer forma agradeço!