Slideshow: efeito de deslizamento de imagem com CSS e jQuery

Hoje vamos falar sobre CSS e jQuery e vamos ver como criar facilmente um simples slideshow, com um efeito de deslizamento, suave e automático de imagem usando HTML/CSS/Javascript.

Veja outro slideshow muito simples, usando apenas HTML, CSS e o jQuery, com vários efeitos, muito suave, autoPlay automático, entre muitas outras funcionalidades, muito simples mas muito atrativo e funcional.

Escolher a melhor apresentação de slides ou plugins jQuery galeria pode ser um problema, devido a grande quantidade que podemos encontrar na Internet. Existem diferentes tipos de controles e efeitos para escolher, e é importante analisar as opções para obter o design certo para o nosso site. Podemos incluí sliders imagem básicos, slider de conteúdo misto, sliders Galeria, sliders carrossel, rotadores de banners e alguns até têm apoio totalmente responsivo. Mas será que precisamos mesmo disso para maior parte de nossos trabalhos?

Mas muitas das vezes podemos contornar isso, criando o nosso próprio slideshow. Alem de não perdemos tempo em pesquisas, podemos poupar também os recursos do nosso site…

Se quiser pode visualizar o Slideshow, na demonstração que criamos para si.

O codigo HTML e CSS do Slideshow

Começamos com uma seção principal com duas divs dentro dela, um terá as imagens deslizadas e o outro terá os controles da página:

<section class="slider-container">
    <div class="slider">
        <div class="image_reel">
            <a href="#"><img src="1.jpg" alt="1" /></a>
            <a href="#"><img src="2.jpg" alt="2" /></a>
            <a href="#"><img src="3.jpg" alt="3" /></a>
            <a href="#"><img src="4.jpg" alt="4" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</section>

Será interessante lermos os comentários abaixo, que contêm uma explicação sobre a formatação que usamos:

/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:286px; width: 790px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

O codigo jQuery do Slideshow

A primeira coisa a fazer é chamar o arquivo jQuery. Uma solução para manutenção de ficheiros de scripts, e boa por sinal é a utilização de CDN (Content Delivery Networks) que são locais específicos para aglomerar conteúdos com o intuito de facilitar a sua manutenção e melhorar a performance dos sites, evitando sobrecarga nos servidores. Podemos escolher fazer o download do arquivo a partir do site do jQuery, ou podemos usar o do Google.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Agora usando o evento “$(document).ready”, isto vai permitir que o nosso código jQuery seja executado no momento em que o DOM está pronto para ser manipulado. O código que vamos escrever nos próximos passos será colocado dentro desse evento.

$(document).ready(function() {
	//Code goes here
});

Será facil de perceber o código do script pois este contém comentários explicando quais ações do jQuery estão sendo executadas.

Criando o Image Slider

Começamos por mostrar a página e ativamos o primeiro link. Depois calculamos e ajustamos a largura do image_reel de acordo com a quantidade de imagens que temos.

//Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");
    
    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $(".slider").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

Criando a função Slider e o cronômetro

Criamos agora a função para o evento slide através dele mesmo (rotate), para tal, criamos outra função (rotateSwitch), que irá alternar e repetir aquele evento slide (rotate).

//Paging  and 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  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
            $active = $('.paging a.active').next(); //Move to the next paging
            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 (7 seconds)
    };
    
    rotateSwitch(); //Run function on launch

Os eventos Hover e Click

Isto porque se quisermos ver o slide por um longo período de tempo, iremos permitir que o deslizamento pare quando o mouse passar em cima dele. Outra coisa a considerar é que devemos resetar o cronômetro cada vez que a página é clicada. Isso irá prevenir mudanças inesperadas de deslizamentos e garantir uma experiência mais suave para os visitantes de nosso site.

//On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    });	
    
    //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 timer
        return false; //Prevent browser jump to link anchor
    });

Download do arquivo usado neste exemplo de um Slideshow com deslizamento de imagem…

Com este simple código você poderá aproveitar e melhorar a apresentação das suas imagens em seu site. Muito útil, não acha? Costuma usar jquery e criar os seus slideshows?

Um abraço e até já!