[testUser1]

PS код CSS для слайдера (забыл вставить в вопрос)

/*slider*/

.content{

text-align: center;
font: 600 0.83em/2 comic sans ms, verdana, sans serif;

}

*{

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

html{
min-height: 100%;
}


#slider{


margin-top:-20px;
margin-left:-20px;
height: 256px;
transform: scale(1.08);

}

#slider:hover{
/*transform: scale(1.09);*/
}

#img_1 {
line-height: 15px;
background-color: grey;
background-image: url(../images/content/picture.jpg);
background-repeat: no-repeat;
background-size: contain ;
display: flex;
flex-direction: column-reverse;
color:white;
border-radius:4px;

}

.head1{
color: brown;
text-shadow: 1px 1px 1px white,
-1px -1px 1px black;
}

.explain{
color: crimson;
}

#img_2 {

background: url(../images/content/london-olympic-stadium-M4091.jpg) no-repeat bottom;

background-size: contain;
/*padding-left: 20px;*/
background-color: darkslategrey;

display: flex;
flex-direction: column-reverse;
color:white;
border-radius:4px;
line-height: 15px;
}

#img_3 {
background-color: aqua;
background-image: url(../images/content/3event.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
color:whitesmoke;
display: flex;
flex-direction: column-reverse;

border-radius:4px;
line-height: 15px;
}

#img_4 {
/*background-color: aquamarine;*/
background-image: url(images/5.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_5 {
/*background-color: azure;*/
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_6 {
/*background-color: beige;*/
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_7 {
/*background-color: bisque;*/
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_8 {
/*background-color: black;*/
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_9 {
/*background-color: blanchedalmond;*/
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_10 {
/*background-color: blue;*/
background-image: url(images/2.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#img_11 {
/*background-color: darkgreen;*/
background-image: url(images/3.jpg);
background-repeat: no-repeat;
background-size: cover;
}



















#slider_box>ul>li {
margin:0;
padding:0;
float: left;
display: block;
height: 370px;
}

#slider_box>ul {

height:370px;
padding:0;
overflow: hidden;
width: 1000%;
}

#slider_box {

height:370px;
overflow: hidden;
position: relative;
left: 30px;
}



#left_nav {
float:left;

translateX:-15px ;

width: 50px;
height:110px;
background: url("../images/opposite.png") center ;
background-size: cover;
opacity: 0.7;
}

#left_nav:hover{
opacity:1;
transform: scale(1.04);
}

#nav_slider>div {

width: 40px;
height: 46px;
}



#right_nav {
float: right;

margin-right:10px;
translateX:-20px;
height: 100px;

background: url("../images/arrright.png") center;
-webkit-background-size: cover;
background-size:cover;
opacity:0.7;
}

#right_nav:hover{
opacity:1;
transform: scale(1.04);
}

#nav_slider {
overflow: hidden;
position: relative;
top: -260px;
}



#slider {
/*position: absolute;
bottom: 10px;
right: 150px;*/
opacity: 0.9;
overflow: hidden;
width: 690px;
height:370px;
margin-left: 30px;
margin-top:10px;
}