Foros del Web » Creando para Internet » CSS »

Galería "slider" solamente con css

 Estas en el tema de Galería "slider" solamente con css en el foro de CSS en Foros del Web. Buenas, os escribo porque he conseguido hacer una galería de imagenes tipo slider con botoncitos para que pasen las imagenes. El siguiente paso es que ...
  #1 (permalink)  
Antiguo 30/12/2014, 03:40
 
Fecha de Ingreso: julio-2014
Mensajes: 53
Antigüedad: 11 años, 3 meses
Puntos: 1
Galería "slider" solamente con css
Buenas, os escribo porque he conseguido hacer una galería de imagenes tipo slider con botoncitos para que pasen las imagenes. El siguiente paso es que las imagenes pasen solas pero que siga habiendo los botoncitos. ¿Podríais ayudarme? Os pongo aqui el codigo html:

Código: 
<div id="galeria">
      <section class="cr-container">            
 
    <!-- radio buttons and labels -->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
    <label for="select-img-1" class="cr-label-img-1"></label>
 
    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2"></label>
 
    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3"></label>
 
    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4"></label>
 
    <div class="clr"></div> 
 
    <!-- panels -->
    <div class="cr-bgimg">
        <div>
            <span>Slice 1 - Image 1</span>
            <span>Slice 1 - Image 2</span>
            <span>Slice 1 - Image 3</span>
            <span>Slice 1 - Image 4</span>
        </div>
        <div>
            <span>Slice 2 - Image 1</span>
            <span>Slice 2 - Image 2</span>
            <span>Slice 2 - Image 3</span>
            <span>Slice 2 - Image 4</span>
        </div>
        <div>
            <span>Slice 3 - Image 1</span>
            <span>Slice 3 - Image 2</span>
            <span>Slice 3 - Image 3</span>
            <span>Slice 3 - Image 4</span>
        </div>
        <div>
            <span>Slice 4 - Image 1</span>
            <span>Slice 4 - Image 2</span>
            <span>Slice 4 - Image 3</span>
            <span>Slice 4 - Image 4</span>
        </div>
    </div>
 
    <!-- titles -->
    <div class="cr-titles">
        <h3>
             <span></span>
            <span><a id="color" href="#4">Albor</a></span>
        </h3>
        <h3>
            <span></span>
            <span><a id="color" href="#2">mciwe</a></span>
        </h3>
        <h3>
            <span></span>
            <span><a id="color" href="#1">dwwd</a></span>
        </h3>
        <h3>
            <span></span>
            <span><a id="color" href="#5">prueba</a></span>
        </h3>
    </div>
 
</section>
</div>

Y en otro mensaje el css
  #2 (permalink)  
Antiguo 30/12/2014, 03:41
 
Fecha de Ingreso: julio-2014
Mensajes: 53
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Galería "slider" solamente con css
Código: 
.cr-container{	
	width: 1420px;
	height: 500px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.cr-container label{
	font-style: italic;
	width: 35px;
	left:650px;
	height: 1530px;
	cursor: pointer;
	color: #fff;
	line-height: 50px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top:450px;
	z-index: 1000;
}

.cr-container label:before{
	content:'';
	width: 8px;
	height: 8px;
	background: #FFF;
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 100%;
	box-shadow: 0px 0px 0px 3px rgba(255,255,255,1);
	z-index:-1;
}

.cr-container label:after{
	width: 10px;
	height: 600px;
	content: '';
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323443', endColorstr='#323443',GradientType=0 );
	position: absolute;
	bottom: -20px;
	right: 0px;
}

.cr-container label.cr-label-img-4:after{
	width: 0px;
}

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #323443;
	box-shadow: 0px 0px 0px 3px #FFF;
}

.cr-container input{
	display: none;
}

.cr-bgimg{
	width: 1420px;
	height: 500px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	background-repeat: no-repeat;
}

.cr-bgimg{
	background-repeat: no-repeat;
	background-position: 0 0;
}

.cr-bgimg div{
	width: 1400px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}

.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	z-index: 2;
	text-indent: -9000px;
	background-repeat: no-repeat;
}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../images/1.jpg);
	background-repeat: no-repeat;
}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(../images/2.jpg);
	background-repeat: no-repeat;
}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(../images/3.jpg);
	background-repeat: no-repeat;
}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(../images/4.jpg);
	background-repeat: no-repeat;
}

.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
	background-repeat: no-repeat;
}

.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
	background-repeat: no-repeat;
}

.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
	background-repeat: no-repeat;
}

.cr-container input:checked ~ .cr-bgimg div span{
	-webkit-animation: scaleOut 0.6s ease-in-out;
	-moz-animation: scaleOut 0.6s ease-in-out;
	-o-animation: scaleOut 0.6s ease-in-out;
	-ms-animation: scaleOut 0.6s ease-in-out;
	animation: scaleOut 0.6s ease-in-out;
	background-repeat: no-repeat;
}

@-webkit-keyframes scaleOut{
	0%{ -webkit-transform: scale(1); opacity: 1; }
	100%{ -webkit-transform: scale(1.5); opacity: 0; }
}

@-moz-keyframes scaleOut{
	0%{ -moz-transform: scale(1); opacity: 1; }
	100%{ -moz-transform: scale(1.5); opacity: 0; }
}

@-o-keyframes scaleOut{
	0%{ -o-transform: scale(1); opacity: 1; }
	100%{ -o-transform: scale(1.5); opacity: 0; }
}

@-ms-keyframes scaleOut{
	0%{ -ms-transform: scale(1); opacity: 1; }
	100%{ -ms-transform: scale(1.5); opacity: 0; }
}

@keyframes scaleOut{
	0%{ transform: scale(1); opacity: 1; }
	100%{ transform: scale(1.5); opacity: 0; }
}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	z-index:10000;
	background-repeat: no-repeat;
}

.cr-titles h3{
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	background-repeat: no-repeat;
}

.cr-titles h3 span{
	z-index: 10000;
	position: absolute;
	width: 100%;
	left: 0px;
	text-align: center;
	opacity: 0;
	top: 50%;
	background-repeat: no-repeat;
}

.cr-titles h3 span:nth-child(1){
	left: 0px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 70px;
	letter-spacing: 7px;
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
	background-repeat: no-repeat;
}

.cr-titles h3 span:nth-child(2){
	border: #475678 2px solid;
	width:100px;
	left:450px;
	top:100px;
	color:white;
	margin-top: 120px;
	letter-spacing: 0px;
	font-size: 14px;
	padding: 10px 0px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	-webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	-ms-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
	background-repeat: no-repeat;
}

#color {
	color:#475678;
}

.cr-container input:checked ~ .cr-titles h3 span{
	opacity: 0;
	text-shadow: 0px 0px 30px #fff;
}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
	opacity: 1;
	text-shadow: 0px 0px 1px #fff;
}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
	opacity: 1;
}

/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
		background-repeat: no-repeat;
	}
	
	.cr-container label{
		display: none;
		background-repeat: no-repeat;
	}
}
Muchas gracias de antemano
  #3 (permalink)  
Antiguo 02/01/2015, 15:37
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 16 años, 9 meses
Puntos: 306
Respuesta: Galería "slider" solamente con css
Te dejo un lik: http://ksesocss.blogspot.com/search?q=slider desde el cual seguro le sacarás provecho.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #4 (permalink)  
Antiguo 07/01/2015, 02:44
 
Fecha de Ingreso: julio-2014
Mensajes: 53
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Galería "slider" solamente con css
Gracias, me ha ayudado mucho!

Etiquetas: color, html, slider, solamente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:44.