Vitrine Carrossel Slider/Touch Screen

Layout
1

Boa noite!

Gostaria de saber se seria possível implementar o carrossel no mobile com touch screen, sem a necessidade de usar as setas, que podem até ser mantidas.
Já vi alguns temas prontos que possuem essa funcionalidade.
Seria algo muito complexo? Alguem já usou ou tem algo parecido?

Obrigado.

2 curtidas
2

@Leonardo_Vicentini_F tudo bem? Já chegou ver alguma implementação nesse sentido? Obrigado👍

3

rapaz depois que vc falou sobre isso eu fui dar uma olhada, é uma merda isso… nunca tinha reparado isso… no banner funciona, mas na vitrine, não…

4

Exato…um cliente tentou usar o touch na primeira vez que abriu rsrsrs…eu vi nesse site abaixo porém ele tem tema proprio.

5

ele está praticamente reconstruindo a lista com um outro plugin que faz isso…

2 curtidas
6

A única forma é trocar o sistema de carrossel. Não é simples e na maioria das vezes vai deixar a loja bem mais lenta.

2 curtidas
7

achei uma forma muito mais fácil de resolver…
ainda estou testando…

1 curtida
8

ativado… agora e ver se funciona mesmo…
parece que ficou bom para android… agora e achar algum rico para testar no iphone…

9

hahahaha não serei eu rsrsrs…acabei de testar aqui tb na sua loja…ficou campeão

10

kkkkkkkkkkkkkkkkkk

poxa vc sacou a indireta… kkkkkkkkkkk
pedi a CEO aqui para testar…
aguardando retorno…

1 curtida
11

Opa @Leonardo_Vicentini_F … queria ver se conseguiu validar a mudança?

vlw

12

opa sim vou te mandar no privado o codigo, ai vc testa

2 curtidas
13

Olá Leonardo!
Poderia me enviar o código também pfv?
Agradeço!

14 
/*!
 * swiped-events.js - v1.1.4
 * Pure JavaScript swipe events
 * https://github.com/john-doherty/swiped-events
 * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
 * @author John Doherty <www.johndoherty.info>
 * @license MIT
*/
!function(t,e){"use strict";"function"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=e.createEvent("CustomEvent");return a.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),a},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener("touchstart",function(t){if("true"===t.target.getAttribute("data-swipe-ignore"))return;s=t.target,r=Date.now(),n=t.touches[0].clientX,a=t.touches[0].clientY,u=0,i=0},!1),e.addEventListener("touchmove",function(t){if(!n||!a)return;var e=t.touches[0].clientX,r=t.touches[0].clientY;u=n-e,i=a-r},!1),e.addEventListener("touchend",function(t){if(s!==t.target)return;var e=parseInt(l(s,"data-swipe-threshold","20"),10),o=parseInt(l(s,"data-swipe-timeout","500"),10),c=Date.now()-r,d="",p=t.changedTouches||t.touches||[];Math.abs(u)>Math.abs(i)?Math.abs(u)>e&&c<o&&(d=u>0?"swiped-left":"swiped-right"):Math.abs(i)>e&&c<o&&(d=i>0?"swiped-up":"swiped-down");if(""!==d){var b={dir:d.replace(/swiped-/,""),xStart:parseInt(n,10),xEnd:parseInt((p[0]||{}).clientX||-1,10),yStart:parseInt(a,10),yEnd:parseInt((p[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent("swiped",{bubbles:!0,cancelable:!0,detail:b})),s.dispatchEvent(new CustomEvent(d,{bubbles:!0,cancelable:!0,detail:b}))}n=null,a=null,r=null},!1);var n=null,a=null,u=null,i=null,r=null,s=null;function l(t,n,a){for(;t&&t!==e.documentElement;){var u=t.getAttribute(n);if(u)return u;t=t.parentNode}return a}}(window,document);

$(function(){
    $(".listagem-linha.flexslider > div > ul > li").each(function (e, t){
    	t.addEventListener('swiped-left', function(ee) {
    		$(ee.target).parents('.flexslider').flexslider("next");
    	});
    	t.addEventListener('swiped-right', function(ee) {
    		$(ee.target).parents('.flexslider').flexslider("prev");
    	});
    });
});

image
image1058×327 6.12 KB

2 curtidas