Header Image / Slider
Hey there,
I use on every single page a individual Image in the header mit this code:
.page-id-37 .page-title-section{background:url('myimageurl') ;background-size:cover
}
Is it possible to put an Slider instead of an static image?
I use a css slider on a test site, i works fine. Can i get this ccs slider in the page title?
this is the css code of the slider:
.slider {
max-width: 3000px;
height: 400px;
margin-left: 0px;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(myimageurl)no-repeat center;
background-size: contain;
animation:fade 30s infinite;
-webkit-animation:fade 30s infinite;
}
.slide2 {
background: url(myimageurl)no-repeat center;
background-size: contain;
animation:fade2 30s infinite;
-webkit-animation:fade2 30s infinite;
}
.slide3 {
background: url(myimageurl)no-repeat center;
background-size: contain;
animation:fade3 30s infinite;
-webkit-animation:fade3 30s infinite;
}
@keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
I hope you can help me.
Best
I use on every single page a individual Image in the header mit this code:
.page-id-37 .page-title-section{background:url('myimageurl') ;background-size:cover
}
Is it possible to put an Slider instead of an static image?
I use a css slider on a test site, i works fine. Can i get this ccs slider in the page title?
this is the css code of the slider:
.slider {
max-width: 3000px;
height: 400px;
margin-left: 0px;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(myimageurl)no-repeat center;
background-size: contain;
animation:fade 30s infinite;
-webkit-animation:fade 30s infinite;
}
.slide2 {
background: url(myimageurl)no-repeat center;
background-size: contain;
animation:fade2 30s infinite;
-webkit-animation:fade2 30s infinite;
}
.slide3 {
background: url(myimageurl)no-repeat center;
background-size: contain;
animation:fade3 30s infinite;
-webkit-animation:fade3 30s infinite;
}
@keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
I hope you can help me.
Best
Tagged:
Comments
i don't want the same slider on all pages, only for one page.
Maybe i use a second slider on an different page later, but know i decide me to use only one.
Greetings
Marcus