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.