No exemplo a seguir, ensinaremos como colocar um carrossel animado feito em Javascript em sua loja na Dotstore, proporcionando uma experiência nova para o seu cliente, onde você pode colocar uma promoção específica que será exibida dentro do carrossel.

Para iniciarmos, é preciso chamar as jQuerys no topo da página HTML:

<script type="text/javascript" src="https://www.dotstore.com.br/dotstore/inc/extras/jcarousel.js"></script>
<script type="text/javascript" src="https://www.dotstore.com.br/dotstore/inc/extras/jquery.min.js"></script>

Após isso, inclua o script abaixo, que configura os atributos do plugin do carrossel, como por exemplo quantidade, velocidade ou se iniciará automaticamente.

<script>
$(function(){
        $(".DS_carosel").jCarouselLite({
            btnNext: ".DS_next",
            btnPrev: ".DS_prev",
            circular: true,
            visible: 6,
            auto: 3000,
            speed:500
        })
    })
</script>

Agora é preciso incluir o código HTML em um dos seus arquivos disponíveis para personalização em seu painel de controle.

<div id="DS_ControleGeralCarrosel">
<div id="DS_BoxNavegacao">
<button class="DS_prev"></button>
<button class="DS_next"></button>
<div id="DS_carosel">
<div class="DS_carosel">
<!-- INICIO ProdutoListaBlocoCSS1 -->
<!-- PARAMS % em=maisvendidos ~ qtde=9 ~ cols=1~ noline -->
    <div id="DS_BlocodeProdutos">
    <div id="DS_IMGprodutoPeq">##ProdutoIMG % cod=n##</div>
<div id="DS_Nomeproduto"><a href="##URLProduto % cod=n##" title="##NomeProduto % cod=n##">##NomeProduto % cod=n##</a></div>
<div id="DS_Preco">##ProdutoValorPor % cod=n##</div>
</div>
<!-- FINAL ProdutoListaBlocoCSS1-->
</div>
</div>
</div>
</div>

Repare que há um <!—PARAMS --> com o atributo de mais vendidosem=maisvendidos.Sendo assim, ele puxará os produtos mais vendidos do banco de dados de sua loja para serem exibidos no carrossel junto com os parâmetros apontados logo acima.

Junto com a tag <!-- INICIO ProdutoListaBlocoCSS1 --> podemos colocar várias Tags Especiais, como Imagem do Produto, Nome do Produto e Preço.

O último passo será incluir o CSS padrão do Plugin utilizando as classes ou Ids para estilizar. Veja o exemplo abaixo:

<style>
#DS_ControleGeralCarrosel {width:1003px; margin-top:12px; float:left}
#DS_BoxNavegacao{width:940px; height:400px; margin: 12px auto 0 35px; float:left}
#DS_carosel{width:603px; height:400px; margin:0 auto; text-align:center; overflow:hidden}
.DS_carosel{margin:0 auto; width:700px;}
.DS_prev{float:left; width:25px; height:31px; margin:91px 0 0 35px; background:url("../imagens/PrevBt.gif") no-repeat; border:0; cursor:pointer;}
.DS_next{float:right; width:25px; height:31px; margin:91px 35px 0 0; background:url("../imagens/NextBt.gif") no-repeat; border:0; cursor:pointer;}
.DS_carosel ul{width:780px; margin:0 auto; text-align:center;}
.DS_carosel ul li{list-style:none; width:150px;}
#DS_Dot_ListaProdutosLI{float:left;}
#DS_BlocoProdutosCarosel{width:180px; min-height:206px; height:206px; margin:0 auto; margin-bottom:5px; text-align:left; }
html>body #BlocoProdutosCarosel {height: auto;}
</style>

Até a próxima!