Portfolio image slider com CSS e JQuery

Com o lançamento do IPAD e da sua falta de suporte para flash, que despertou uma série de debates sobre o futuro do flash. Com isto em mente, eu acredito que é prudente criar widgets simples como o controle deslizante de imagem usando HTML / CSS / Javascript, e deixar mais aplicações interativas para o flash, se necessário.

Por | @oficinadanet Programação

Com o lançamento do IPAD e da sua falta de suporte para flash, que despertou uma série de debates sobre o futuro do flash. Com isto em mente, eu acredito que é prudente criar widgets simples como o controle deslizante de imagem usando HTML / CSS / Javascript, e deixar mais aplicações interativas para o flash, se necessário. O controle deslizante de imagem html baseado terá seus benefícios com SEO e também irá degradar normalmente para aqueles códigos javascript externos.

Portfolio image slider com CSS e JQuery



HTML


Comece com ter um div container embrulho chamado main_view , e duas seções aninhada chamada image_reel e paging . O image_reel irá conter as imagens deslizantes e paging contém os controles de paginação. Dê uma olhada na imagem abaixo para uma visual.
Portfolio image slider com CSS e JQuery





CSS


Dê uma olhada nos comentários abaixo para uma explicação dos estilos.
/*-- Container Principal --*/
.main_view {
	float: left; margin-right:15px;
	position: relative;
}
/*--Janela / Masking Estilos--*/
.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; margin-right:15px;}

/*--Paginação de Estilos--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; / *-- Garante a paginação fica na camada superior - * /
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; / *-- escondido por padrão, será mostrado mais tarde com 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;}



Etapa 3. Criação de jQuery


Para aqueles que não estão familiarizados com
jQuery , fazer check-out o seu primeiro site e obter uma visão geral de como ele funciona. Eu compartilhei um alguns truques que eu acumulei ao longo do caminho, você pode verificar os para fora também.

Etapa inicial - Chame o arquivo jQuery


Você pode optar por baixar o arquivo do site do jQuery, ou você pode usar esta hospedado no Google.

Mais sobre: imagem, slider, portfolio
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários