Eu estou tentando usar esse script... mas quando eu adiciono o console me retorna esse erro:
Error: Syntax error, unrecognized expression: "#listagemProdutos .vitrine-0 > ul li.listagem-linha > .flex-viewport ul"
Qual o problema? Quando eu removo tudo e deixo apenas aspas duplas antes e depois do seletor... ele passa! Mas dessa forma eu não consigo usar a variável no seletor.
Desde já agradeço a ajuda!
$(document).ready(function () {
if(screen.width < 768) {
//-- Pega o valor nativo da div do produto e divide
let larg = document.querySelector("#listagemProdutos > ul li.listagem-linha ul li").clientWidth;
let largResult = larg / 2;
//desativa função nativa de prev e nextve remove atributo href logo no inicio do código
let prevNext = "#listagemProdutos > ul li.listagem-linha ul .flex-prev, #listagemProdutos > ul li.listagem-linha ul .flex-next";
$(prevNext).off().removeAttr("href");
//Adiciona classe unica aproveitando o indice da nodeList gerado para selecionar as vitrines de forma independente.
//Chama a função que cria o comportamento do carrossel, passando o parametro index que será o identificador chave
//de cada classe única.
var arrUl = document.querySelectorAll("#listagemProdutos .produtos-carrossel");
for (var i = 0; i < arrUl.length; i++) {
arrUl[i].classList.add("vitrine-" + i);
criarCarrossel(i);
} //-- FIM DO FOR
function criarCarrossel (ii) {
let firsts = '\"#listagemProdutos .vitrine-' + ii + ' .flex-viewport ul li:nth-child(-n+2)\"';
let liUlt = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha > .flex-viewport li:last-child\"";
let liRecipiente = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha > .flex-viewport ul\"";
let btnPrev = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul .flex-prev\"";
let btnNext = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul .flex-next\"";
let liAtivo = "\"#listagemProdutos .vitrine-" + ii + " > ul li.listagem-linha ul li.ativo\"";
//console.log(larg);
$(firsts).addClass("ativo").css("max-width", largResult + "px");
$(liRecipiente).attr("data-pos", "0"); //posição inicial do slide
$(btnNext).click(function(){btn_prox();});
$(btnPrev).click(function(){btn_ante();});
function btn_prox (){
if($(liAtivo).next().size() && $(liUlt).hasClass("")){
let elPosition = document.querySelector(liRecipiente);
let posAtual = parseInt(elPosition.getAttribute("data-pos"));
let largResultNeg = largResult * -1;
let novaPos = ((largResultNeg * 2) + posAtual);
$(liRecipiente).attr("data-pos", novaPos + "px").css("transform", "translateX(" + novaPos + "px)");
$(liAtivo).removeClass("ativo").css("max-width", "100%").next().addClass("ativo").css("max-width", largResult + "px");
} else {
$(liRecipiente).attr("data-pos", "0").css("transform", "translateX(0)");
$(liAtivo).removeClass("ativo");
$(firsts).addClass("ativo").css("max-width", largResult+"px");
} //-- FIM DO IF CARROSSEL
} //-- FIM DA FUNÇÃO btn_prox
} //-- FIM DO criarCarrossel
} //-- FIM DO IF VERIFICADOR DE TELA
}); //-- FIM DE TUDO