Tutorial

Am introdus la o tema un slider static pentru pozele personale si nu numai.Ca sa intelegeti despre ce e vorba:

DEMO

Si am acum iata codurile pentru slider.

Acest cod se introduce unde vrei sa apra sliderul index.php sau footer.php al temei.In demo este in index.php daca vrei sa apara jos in tema il pui in footer.php.




Si acum codul pentru style.css


.slider {
background: #E5E3E1;
width: 960px;
height: 350px;
padding: 5px;
position: relative;
top: 3px;
overflow: hidden;
margin-bottom:20px;
margin-left:10px;
}

label{
width: 225px;
height: 70px;
cursor: pointer;
position: relative;
margin: 275px 0 0 10px;
float: left;
box-sizing: border-box;
/*-webkit-filter: ();*/
}

label:hover{
border: solid 2px #ccc;
/* -webkit-filter: none; */
transform: scale(1.05);
}

#slide1:checked ~ .slide1{
border: solid 2px #fff;
-webkit-filter: none;
}

#slide2:checked ~ .slide2{
border: solid 2px #fff;
-webkit-filter: none;
}

#slide3:checked ~ .slide3{
border: solid 2px #fff;
-webkit-filter: none;
}

#slide4:checked ~ .slide4{
border: solid 2px #fff;
-webkit-filter: none;
}

.images {
background: #ccc;
width: 100%;
height: 74%;
transition: background .3s linear;
}

input[type='radio'] {
opacity: 0;
position: absolute;
z-index: -9999;
}
input[type='radio']:checked {
content: '';
border: solid 2px #ccc;
box-shadow: none;
-webkit-filter: none;
}

input[type='radio']:hover{
border: solid 2px #ddd;
-webkit-filter: none;
transform: scale(1.05);
z-index: 9999;
}

.slide1 {
background: url(https://www.lideea.eu/wordpress/wp-content/uploads/2012/03/02.jpg);
background-size: cover;
}

.slide2 {
background: url(https://sphotos-a.xx.fbcdn.net/hphotos-ash3/532054_350461111666107_2010303209_n.jpg);
background-size: cover;
}

.slide3 {
background: url(https://vizitatirosiamontana.files.wordpress.com/2012/03/cropped-primavararosiamontana1.jpg);
background-size: cover;
}

.slide4 {
background: url(https://flutureledepiatra.files.wordpress.com/2012/06/mont-blanc-du-tacul_couloir-chere.jpg?w=960&h=260&crop=1);
background-size: cover;
}

#slide1:checked ~ .images {
background: url(https://www.lideea.eu/wordpress/wp-content/uploads/2012/03/02.jpg);
}

#slide2:checked ~ .images {
background: url(https://sphotos-a.xx.fbcdn.net/hphotos-ash3/532054_350461111666107_2010303209_n.jpg);
}

#slide3:checked ~ .images {
background: url(https://vizitatirosiamontana.files.wordpress.com/2012/03/cropped-primavararosiamontana1.jpg);
}

#slide4:checked ~ .images {
background: url(https://flutureledepiatra.files.wordpress.com/2012/06/mont-blanc-du-tacul_couloir-chere.jpg?w=960&h=260&crop=1);
}

se introduce url dorit la fiecare slide in parte: 1 cu 1, 2 cu 2, 3 cu 3 ,4 cu 4.Cine nu se descurca ma gasesti la pagina de contact.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Alte articole Populare