Hi all. I am still fairly new to umbraco and building my first website at the moment.

I have a bootstrap carousel with 6 slides that are displayed random on each page refresh, that works fine. Each of those slides are one big promo banner image which also needs to be a clickable link that has an anchor tag, which leads to more information on other pages. I have added a new property "related links 2" to the document type and referenced the anchor link tag where it needs to go. The link works fine when I go through umbraco, but when I click on it on the actual page I get a 404 error. When I hover above the image it says it's leading to Umbraco.Web.Models.RelatedLinks instead of the actual path of the link that was added in the property. hHere is my view code:

@inherits Umbraco.Web.Mvc.UmbracoViewPage

@{ 
    var banners = Umbraco.TypedContent(1096).Children<BannerImages>().Where(x => x.IsVisible()).ToList().OrderBy(n => Guid.NewGuid());
    var bannerSliderIndex = 0;
    var bannerIndex = 0;
}

@*//////////////////////////////////////=======================Section#1 Banner===================//////////////////////////////////////////////*@
<section>
    <div id="carouselBannerDeals" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            @foreach (var bannerImage in banners)
            {
                <li data-target="#carouselBannerDeals" data-slide-to="@bannerSliderIndex" class="@(bannerSliderIndex == 0 ? "active" : "")"></li>
                bannerSliderIndex++;
            }
        </ol>
        <div class="carousel-inner">
            @foreach (var bannerImage in banners)
            {
                bannerIndex++;
                <div class="carousel-item@(bannerIndex == 1 ? " active" : "")">
                    <a href="@bannerImage.BannerImageLink">
                        <picture>
                            <source media="(max-width: 576px)"
                                    srcset="@bannerImage.BannerImage1mob.GetCropUrl("banner@mob")">
                            <source media="(max-width: 768px)"
                                    srcset="@bannerImage.BannerImage1.GetCropUrl("banner@768")">
                            <source media="(max-width: 1024px)"
                                    srcset="@bannerImage.BannerImage1.GetCropUrl("banner@1024")" )>
                            <source media="(min-width: 1025px)"
                                    srcset="@bannerImage.BannerImage1.GetCropUrl("banner@1366")">
                            <img class="d-block w-100" src="@bannerImage.BannerImage1.GetCropUrl("banner@1366")" alt="banner">
                        </picture>
                    </a>
                </div>
            }
        </div>
    </div>
</section>