bloggerDESIGNER .:: O Melhor Conteúdo Para Você!

O Slider Deslizante Horizontal, é um tipo de html que faz com que imagens fiquem passando um por 1, é meio complica- do de explicar, por isso preparei uma demo, para você poderem ver.

Se interessou por essa slider, diga o tutorial.

Antes de fazer alteração em seu layout, faça um beckup do seu layout no seu computador antes de prosseguir o tutorial, para evitar problemas.

Vá em Modelo > Editar HTML > Expandir modelos do widget.
Primeiramente vamos aplicar o JavaScript, procure por </head> e após encontrá-lo copie e cole este código acima da tag encontrada.

<!-- Slider Deslizante Horizontal - Inicio-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {



 //Set Default State of each portfolio piece

 $(".paging").show();

 $(".paging a:first").addClass("active");

  

 //Get size of images, how many there are, then determin the size of the image reel.

 var imageWidth = $(".window").width();

 var imageSum = $(".image_reel img").size();

 var imageReelWidth = imageWidth * imageSum;

 

 //Adjust the image reel to its new size

 $(".image_reel").css({'width' : imageReelWidth});

 

 //Paging + Slider Function

 rotate = function(){ 

  var triggerID = $active.attr("rel") - 1; //Get number of times to slide

  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide



  $(".paging a").removeClass('active'); //Remove all active class

  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

  

  //Slider Animation

  $(".image_reel").animate({

   left: -image_reelPosition

  }, 500 );

  

 };

 

 //Rotation + Timing Event

 rotateSwitch = function(){  

  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds

   $active = $('.paging a.active').next();

   if ( $active.length === 0) { //If paging reaches the end...

    $active = $('.paging a:first'); //go back to first

   }

   rotate(); //Trigger the paging and slider function

  }, 7000); //Timer speed in milliseconds (3 seconds)

 };

 

 rotateSwitch(); //Run function on launch

 

 //On Hover

 $(".image_reel a").hover(function() {

  clearInterval(play); //Stop the rotation

 }, function() {

  rotateSwitch(); //Resume rotation

 }); 

 

 //On Click

 $(".paging a").click(function() { 

  $active = $(this); //Activate the clicked paging

  //Reset Timer

  clearInterval(play); //Stop the rotation

  rotate(); //Trigger rotation immediately

  rotateSwitch(); // Resume rotation

  return false; //Prevent browser jump to link anchor

 }); 

 

});



</script>

<!-- Slider Deslizante Horizontal - Fim-->

Após ter feito isso, vamos aplicar o css, procure por ]]></b:skin> e cole este código acima da tag encontrada.

 /*--Slider geral--*/ 

.main_view {

float: left; position: relative;

} 

/*--Estilo do fundo das imagens--*/ 

.window { 

height: 300px; 

width: 550px;

overflow: hidden; 

position: relative; 

border: solid 4px #fff;

}

.image_reel {

position: absolute; top: 0; left: 0; 

} 

.image_reel img { 

float: left; 

} 

.paging { 

position: absolute; 

bottom: 40px; 

right: -0px; 

width: 220px; 

height:41px;

z-index: 100; 

text-align: center; 

line-height: 40px; 

background: #2b84ff; 

display: none; 

} 

/*--Estilos do link da numeração--*/ 

.paging a { 

outline:none; 

padding: 5px 10px; 

text-decoration: none; 

text-shadow:none;

color: #000; 

background: #fff;

} 

.paging a.active { 

font-weight: bold;

color: #fff; 

background: #920000; 

}

.paging a:hover { 

font-weight: bold; 

}

No valor .window destacado é onde você modela o fundo da slider.
No valor 300 é onde você determinará a altura e no valor 550 a largura da slider.

Pronto, agora para aplicar a slider onde bem entender, coloque este código no local:

<div style="margin-left: 175px">

<div class="main_view">

<div class="window">

<div class="image_reel">

<a href="LINK-IMAGEM-1">

<img alt="" src="IMAGEM-1" /></a>

<a href="LINK-IMAGEM-2">

<img alt="" src="IMAGEM-2" /></a>

<a href="LINK-IMAGEM-3">

<img alt="" src="IMAGEM-3" /></a>

<a href="LINK-IMAGEM-4">

<img alt="" src="IMAGEM-4" /></a>

</div>

</div>

<div class="paging">

<a href="bloggerdesignerplus.blogspot.com.br" rel="1">1</a>

<a href="bloggerdesignerplus.blogspot.com.br" rel="2">2</a>

<a href="bloggerdesignerplus.blogspot.com.br" rel="3">3</a>

<a href="bloggerdesignerplus.blogspot.com.br" rel="4">4</a>

</div>

</div>

</div>

Nas partes em destaque, você modificará para o que se pede.
Então é isso está pronto sua slider, e não deixem de comentar!!