Header background image as slider for Travelify theme

Hello, so I have this site http://www.itmc.lt/naujas/ and I have already changed the header image (it’s that concrete style pattern) but now I want to change it into moving image slider, but the broblem that I don’t know how to set slider in css. Here is a picture so you can understand me better.

Anyone?

Hi @heisenberg,

I hope you are well today and thank you for your patience here.

You can make the background displayed in your shared screenshot as slider by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; top: 0; }
46% { top: -140px; }
56% { top: -140px; right: -100%; left: 100%; }
57% { top: 0;}

}

header#branding .container{
	overflow: hidden;
}

header#branding .container .hgroup-wrap { 
  position: relative;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite; 
}

Also for your information, you can create a slider by using the various options provided by Travelify theme in the theme options on the following path.

Admin Area -> Appearance -> Theme Options -> Featured Slider

Best Regards,
Movin

Thanks for your reply very much! I think i formed my question bad, so I will try again (sorry for that). I want my header #branding background-image to be few images slideshow, and I don’t know how to do it. Again I’m attaching a photo, maybe now things will be more clear.

Hi @heisenberg,

You can create the images slideshow in the header by using the following CSS code.

Please upload the slider images in media library of your WordPress site and add those image paths in the following code for background-image property. The images sizes should be around 978 X 168


@keyframes slidy {
25% { background-image: url("http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg"); }
50% { background-image: url("http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"); }
75% { background-image: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg"); }
100% { background-image: url("http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"); }
}

header#branding{
	overflow: hidden;
}

header#branding{ 
  position: relative;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite; 
}

Cheers,
Movin

Oh my god, IT WORKS! Thank you very much, it has been such head pain for me. Best theme support!

You are most welcome here :slight_smile: