Mangas
Episodios
Filmes
Ovas
LokeCross, 22 de Abril de 2014 às 12:40

Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post
LokeCross, 22 de Abril de 2014 às 12:40

Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post Testanto post
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!!