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

Comments

  • Hi 
    We have little confusion regarding your issue . 
    Are you want slider on each page . 

    Kindly clear me so that we can assist you better . 

    Thanks 
    Akhilesh
  • Sorry for the confusing,  i am also confused with this problem :-)

    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


  • Hi 
    For this you need to use  meta slider plugin . 
    Download and install meta slider plugin from this link . 


    Thanks 
Sign In or Register to comment.