Boa tarde Galera,
Preciso da ajuda de vocês!
Na versão mobile
Gostaria de conseguir configurar uma opção de slider nas imagens dos produtos, na pagina do produto.
Para que os clientes consigam passar as fotos arrastando pro lado.
Link da Loja: https://louise-store-collection.lojaintegrada.com.br/mochila-schutz-premium
seria algo assim (quando clica na imagem)
Não, vou dar um exemplo de um site famoso
Entra pelo celular, e passa as imgs
https://www.usereserva.com/adulto/p/camiseta-pf-fantasia/0050453?prodc=037
Você precisa arrastar para o lado para passar, isso que queria
Entendi, bom vamos ver se alguem tem algum código para isso…
Acabei de entender esse que você fez é muuuuuito bom também. Se puder disponibilizar
Bom dia @math , tem conhecimento de algo assim? algo que possa melhorar o zoom e possa deixar as imagens com slide ao passar o dedo?
Abraço irmão.
será que aquele seu codigo não daria de adaptar para essa necessidade?
infelizmente não, pq não é um carrossel de imagens, é um seletor, onde o carrossel está embaixo.
este código apenas ativa a detecção do touch na tela.
consegui fazer uma adaptação…
!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(){
$(".conteiner-imagem img").each(function (e, t){
t.addEventListener('swiped-left', function(ee) {
var i;
var miniaturas = $('ul.miniaturas.slides li');
var limite = miniaturas.length -1;
for (i = 0; i <= limite ; i++) if ($(miniaturas[i]).hasClass("active")) break;
i++;
if (i > limite) i = 0;
$(miniaturas[i]).find('img').first().click();
});
t.addEventListener('swiped-right', function(ee) {
var i;
var miniaturas = $('ul.miniaturas.slides li');
var limite = miniaturas.length -1;
for (i = 0; i <= limite ; i++) if ($(miniaturas[i]).hasClass("active")) break;
i--;
if (i < 0) i = limite;
$(miniaturas[i]).find('img').first().click();
});
});
});
loja teste…
link: Vestido Longo Com Babado Vitória Preto - Loja da Bruna - Testes
Funcionou bacana aqui , porém no meu site, quando eu mudo de foto usando o touch puxando pro lado as miniaturas em baixo da foto não mudam o foco. sempre fica como se tivesse vendo a primeira foto.
https://www.evimero.com.br/cadeira-operativa-secretaria-giratoria-sem-braco-revestida-no-couro-ecologico-na-cor-preta
Estanho… na loja teste funciona…
crie um inserir html novo em vez de colocar dentro de um que vc ja tenha…
vc tem dois tipo de visualização, por isso que deu erro (pc vertical, mobile horizontal)
acertei o código com essa prevenção.
!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(){
$(".thumbs-horizontal .conteiner-imagem img").each(function (e, t){
t.addEventListener('swiped-left', function(ee) {
var i;
var miniaturas = $('.thumbs-horizontal ul.miniaturas.slides li');
var limite = miniaturas.length -1;
for (i = 0; i <= limite ; i++) if ($(miniaturas[i]).hasClass("active")) break;
i++;
if (i > limite) i = 0;
$(miniaturas[i]).find('img').first().click();
});
t.addEventListener('swiped-right', function(ee) {
var i;
var miniaturas = $('.thumbs-horizontal ul.miniaturas.slides li');
var limite = miniaturas.length -1;
for (i = 0; i <= limite ; i++) if ($(miniaturas[i]).hasClass("active")) break;
i--;
if (i < 0) i = limite;
$(miniaturas[i]).find('img').first().click();
});
});
});
Fala @Leonardo_Vicentini_F coloquei o código aqui para teste, mas não funcionou para os slides por touch.
Você fez alguma outra adaptação?
como vc usa tema, pode nao funcionar mesmo
Ah sim, entendi, vou olhar os seletores, para ver se é possível modificar algo nele para que funcione.
Valeu
Você é fera, já me ajudou outras vezes kkk
Sabe algum código pra criar um slide de imagens na página home?
Gostaria de colocar umas imagens passando automaticamente
Conseguiu fazer com que passe os slides por touch?
Para o seu tema!
Inserir html
pagina produto
rodape
tipo javascript
!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(){
$(".conteiner-imagem img").each(function (e, t){
t.addEventListener('swiped-left', function(ee) {
console.log('swiped-left');
var i;
var miniaturas = $('ul.miniaturas .slick-track .slick-slide');
var limite = miniaturas.length -1;
for (i = 0; i <= limite ; i++) if ($(miniaturas[i]).hasClass("active")) break;
i++;
if (i > limite) i = 0;
$('.produto .miniaturas').slick('slickGoTo', i);
$('ul.miniaturas .slick-track .slick-slide[data-slick-index='+i+'] img').click();
});
t.addEventListener('swiped-right', function(ee) {
console.log('swiped-right');
var i;
var miniaturas = $('ul.miniaturas .slick-track .slick-slide');
var limite = miniaturas.length -1;
for (i = 0; i <= limite ; i++) if ($(miniaturas[i]).hasClass("active")) break;
i--;
if (i < 0) i = limite;
$('.produto .miniaturas').slick('slickGoTo', i);
$('ul.miniaturas .slick-track .slick-slide[data-slick-index='+i+'] img').click();
});
});
});
Muito obrigada, funcionou aqui. Para desktop também tem como fazer com que o slide passe para o lado?