background image slider installation without plugin

  •  
  •  
  •  
  •  
  •  

Sometimes you may in need to create a full width background image slider for your website. You may think that how can you do that, right? well. Doesn’t matter whether you are using simple WordPress theme or page builders like divi or element0or. You can install a full width slider where ever you want.

Process of doing that is simple.

Firstly, you have to select the class  where you want to add your slider. You can identify that class  by inspect element. (i.e div.et_pb_section.et_pb_section_0 )

Secondly, After identifying class, you need to go to your theme and  add this css codes inside your WordPress theme file by targeting your class. In my case, class was div.et_pb_section.et_pb_section_0 as I used divi page builder but it must be different in your case.

<!— Css codes starts here ——>

div.et_pb_section.et_pb_section_0{
position:relative;
left:0;
top:0;
width:100%;
height:100%;
animation:animate 16s ease-in-out infinite;
background-size:cover;
}

<!— css code ends here—->

Thirdly,  Upload your images via your WordPress dashboard.

Fourthly, Copy and paste bellow html codes inside your WordPress theme too. Please be aware that, in your case, you will must paste your own image links here and you can add as much image as you need.

<!—HTML code Starts here—->

@keyframes animate{

0%,100%{
background-image:url(https://discountglobaltravels.com/wp-content/uploadszz/2019/04/one.jpg);}

25%{
background-image:url(https://discountglobaltravels.com/wp-content/uploads/2019/04/two.jpg);}

50%{
background-image:url(https://discountglobaltravels.com/wp-content/uploads/2019/04/three.jpg);}

}

<!—HTML code Ends here—->

Note: If you already have an image inserted as a background already via page builder, then you may need to remove that one, otherwise, this images slider may not work as that image will get more priority.


  •  
  •  
  •  
  •  
  •  

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *