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 *

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.