Bootstrap carousel image isn't loading when i attach it to my home page using php

Question

So I've just been doing some homework and I've come across an issue and I can't seem to be able to fix it, I'm not sure if I'm missing something obvious or something but it's just not working. First time using phpstorm btw

I'm using PHP files for a uni course I'm doing and I use the include function to attach this to the front page

I've gone through all these forums on bootstrap carousel errors and I tried even using a URL to see if that would work but it's not working still.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="../c-images/picture1.jpeg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../c-images/picture2.jpeg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../c-images/picture3.jpeg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

this is the HTML code in a file named carousel.php

and then in the front page named index.php , I have an include that includes this carousel.php

include'Includes/carousel.php';

the includes are all in a separate folder named Includes

Images are in another separate folder but when I refer to them I do use the ../ to go back one and then use the correct names to get to the image and use it.

So I'm a bit confused what's wrong if there's any common errors or something I can do to fix this?

Answer 1

As Far as I can understand your code. you need to take care of few things. the carousel.php you are working as only contains HTML code. So keep it simple. Don't use any php syntax in it and place the Code like this as shown Below :

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"> 
</li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="../c-images/picture1.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="../c-images/picture2.jpeg" alt="Second 
slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="../c-images/picture3.jpeg" alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" 
data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" 
data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

As I Have Removed quotes from around the Div.

and simply call the page using PHP as you are doing from index.php page. include'Includes/carousel.php';

But Remove Double quotes from there also and type it in under php Syntaxt as shown Below :

<?php include'Includes/carousel.php'; ?>

Answer 2

Ok i couldn't get it working. But i figured if i added the html into the index.php instead of using include to include it into the page it might work, the images worked.

No to sure why by itself in an include file it didnt work but i will in the future look more into it.

Atleast i got the images working.