PHP / HTML / CSS Image Carousel Featured on Wordpress Frontpage - php

Question

I'm very new to coding, and I've created an image carousel on the front page of a local wordpress site. It's not displaying my images at all. Here's my PHP code:
///HOMEPAGE IMAGE CAROUSEL///
$sliderholder = '<div class="slider-holder" >';
$sliderholder .= '<span id="slider-image-1" ></span>';
$sliderholder .= '<span id="slider-image-2" ></span>';
$sliderholder .= '<span id="slider-image-3" ></span>';
$sliderholder .= '</div>';
$imageholder = '<div class="image-holder" >';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-1002638.jpeg" class="slider-image-1" />';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-905877.jpeg" class="slider-image-2" />';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-399161.jpeg" class="slider-image-3" />';
$imageholder .= '</div>';
$buttonholder = '<div class="button-holder" >';
$buttonholder .= '<a href="#slider-image-1" class="slider-change" ></a>';
$buttonholder .= '<a href="#slider-image-2" class="slider-change" ></a>';
$buttonholder .= '<a href="#slider-image-3" class="slider-change" ></a>';
$buttonholder .= '</div>';
add_action( 'loop_start', 'using_front_page_conditional_tag' );
function using_front_page_conditional_tag() {
if ( is_front_page() ) {
echo $sliderholder.$imageholder.$buttonholder;
}
}
?>
And my CSS:
/*IMAGE CAROUSEL*/
.slider-holder {
width: 100%;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder {
width: 2400px;
background-color: red;
height: 400px;
position: relative;
clear: both;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
}
.slider-image {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
I was able to get the images to appear at one stage on the front page of the site, but they were not styled properly at all, it was really messy and gross on the page. I am now unable to see my images on the site at all. I have no idea where I'm going wrong, I thought it would be as simple as declaring each div as a variable, and then echoing the variables following the 'if' statement regarding the front page. I'm banging my head against the wall. Hoping someone can help. Thanks.

Answer 1

The easiest way to make content show only on the front page is to make a specific template for it.
In your theme (or better still, your CHILD theme - here's a good tutorial on that), copy page.php to a new file and name it front-page.php (if front-page.php already exists, just use that). This template is loaded only on the page that is set as your "homepage" in your Wordpress settings.
In your case here, you can simply add the standard html for your carousel wherever you want it to show in your front-page.php template.