[Tutorial] Slidebar com imagens

Informações:

Autor: Desconhecido
Versões: Todas as versões
Introdução: Poderá criar um slide com seus próprias imagens

Painel de Controle -> Visualização -> Pagina Inicial -> Geral

Código:

    <link href="http://jquerytools.github.io/media/css/scrollable-horizontal.css" type="text/css" rel="stylesheet" /><link href="http://jquerytools.github.io/media/css/scrollable-buttons.css" type="text/css" rel="stylesheet" /><script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<!--  HTML structures  -->
<div style="margin:0 auto; width: 634px; height:120px;">
   <!--  "previous page" action  --><a class="prev browse left"></a>
   <!--  root element for scrollable  -->
   <div id="scrollable" class="scrollable">
        
      <!--  root element for the items  -->  
      <div class="items">
              
         <!--  grupo 1  -->    
         <div>
                  <a href="LINK_1"><img title="TITULO_1" src="IMAGEM_1" /></a>        <a href="LINK_2"><img title="TITULO_2" src="IMAGEM_2" /></a>    <a href="LINK_3"><img title="TITULO_3" src="IMAGEM_3" /></a>         <a href="LINK_4"><img title="TITULO_4" src="IMAGEM_4" /></a>    
         </div>
         <!-- Fim do grupo 1 -->    
         <!--  grupo 2  -->    
         <div>
                       <a href="LINK_5"><img title="TITULO_5" src="IMAGEM_5" /></a>        <a href="LINK_6"><img title="TITULO_6" src="IMAGEM_6" /></a>   <a href="LINK_7"><img title="TITULO_7" src="IMAGEM_7" /></a>         <a href="LINK_8"><img title="TITULO_8" src="IMAGEM_8" /></a>    
         </div>
         <!--   fim do grupo 2  -->    
         <!--  grupo 3  -->    
         <div>
                        <a href="LINK_9"><img title="TITULO_9" src="IMAGEM_9" /></a>        <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>   <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>         <a href="LINK_10"><img title="TITULO_10" src="IMAGEM_10" /></a>    
         </div>
         <!--  fim do grupo 3  -->  
         <!--  Adicione aqui mais códigos -->  
      </div>
      
   </div>
    
   <!--  "next page" action  --><a class="next browse right"></a>
</div>
<!--  javascript coding  --><script>
jQuery(function() {
  // initialize scrollable
  jQuery(".scrollable").scrollable();
});
</script>

• Há como adicionar mais um grupo de slides?
  
  Sim, apenas procure pelo código:
  
  
  E substitua-o por
  

  Código:

   <!-- grupo Nº -->
    <div>
      <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
        <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
    <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
        <a href="LINK_ Nº"><img src="IMAGEM_ Nº" title="TITULO_ Nº" /></a>
    </div>
<!--Fim do grupo  Nº-->

  Adicionando-o um abaixo do outro para que possa colocar mais grupos de imagens.
  
  
• Há como remover grupos de imagens?
  Sim, apenas remova o código que começa com
  "" até o final onde terá "".