Notepad · default

@using Umbraco.Cms.Core.Models
@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Cms.Core.Models.Blocks
@using System.Linq
@inherits cbuae_new.Infrastructure.Views.CbuaeViewPage<IPublishedElement>
@{

Layout = null;
    var currentCulture = System.Threading.Thread.CurrentThread.CurrentCulture;
    // focusCarousel is a Block List, so read it as BlockListModel
    var focusCarouselBlockList = Model.Value<BlockListModel>("focusCarousel");
    var sliderItems = focusCarouselBlockList?.Select(x => x.Content) ?? Enumerable.Empty<IPublishedElement>();
    var imageUrl = "";
    int count = 1;
    int count2 = 1;
    var i = 0;
}
@{
    // Preload first slide image for LCP
    var firstSlider = sliderItems?.FirstOrDefault();
    if (firstSlider != null)
    {
        var firstImage = firstSlider.Value<IPublishedContent>("carouselImage");
        if (firstImage != null)
        {
            <link rel="preload" as="image" href="@firstImage.Url()" fetchpriority="high">
        }
    }
}
<section class="hero p-relative bg-gradient-custom first-fold">

@*New Swiper*@
    <div class="swiper heroSwiperNew">
        <div class="swiper-wrapper">
            @if (sliderItems != null && sliderItems.Any())
            {
                @foreach (var slider in sliderItems)
            {
                var link = slider.Value<Link>("buttonLink");
                var image = slider.Value<IPublishedContent>("carouselImage");
                var desc = slider.Value<String>("CarouselDescription");
                var mainText = slider.Value<String>("CarouselMainText");
                var sliderTitle = slider.Value<String>("sliderTitle");
                var alt = slider.Value<String>("AltText");
                var removeOverlay = slider.Value<bool>("removeOverlay");
                if (image != null)
                {
                    imageUrl = image.Url();
                }
                var linkURL = (link != null && !string.IsNullOrWhiteSpace(link.Url)) ? link.Url : "";
                var linkTitle = !string.IsNullOrWhiteSpace(linkURL) ? (string.IsNullOrWhiteSpace(link.Name) ? "Explore More" : link.Name) : "";
                var slideClass = removeOverlay ? "swiper-slide no-overlay" : "swiper-slide";
                <div class="@slideClass">
                    <img src="@imageUrl" alt="@alt" width="1920" height="1080" loading="eager" fetchpriority="high">
                    <div class="position-absolute text-content">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-5">
                                    @if (!string.IsNullOrWhiteSpace(sliderTitle))
                                    {
                                        <h1 class="text-white mb-3 loaded">
                                            @sliderTitle
                                        </h1>
                                    }
                                    <h1 class="text-white mb-3">
                                       @mainText
                                    </h1>
                                    <p class="text-white mb-5">
                                       @desc
                                    </p>
                                    @if (!string.IsNullOrWhiteSpace(linkURL))
                                    {
                                    <a href="@linkURL"
                                       class="fs-6 font-m bg-gradient-custom text-white-custom rounded-2 p-2 px-4  d-inline-block me-2 ">
                                        @linkTitle
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                             viewBox="0 0 18 18" fill="none" class="ms-1">
                                            <path d="M15.5855 9.39804L10.523 14.4605C10.4174 14.5661 10.2743 14.6254 10.125 14.6254C9.97573 14.6254 9.83258 14.5661 9.72703 14.4605C9.62148 14.355 9.56219 14.2118 9.56219 14.0626C9.56219 13.9133 9.62148 13.7701 9.72703 13.6646L13.8298 9.56257H2.8125C2.66332 9.56257 2.52024 9.50331 2.41475 9.39782C2.30926 9.29233 2.25 9.14925 2.25 9.00007C2.25 8.85088 2.30926 8.70781 2.41475 8.60232C2.52024 8.49683 2.66332 8.43757 2.8125 8.43757H13.8298L9.72703 4.33554C9.62148 4.22999 9.56219 4.08684 9.56219 3.93757C9.56219 3.7883 9.62148 3.64515 9.72703 3.5396C9.83258 3.43405 9.97573 3.37476 10.125 3.37476C10.2743 3.37476 10.4174 3.43405 10.523 3.5396L15.5855 8.6021C15.6378 8.65434 15.6793 8.71638 15.7076 8.78466C15.7359 8.85295 15.7504 8.92615 15.7504 9.00007C15.7504 9.07399 15.7359 9.14719 15.7076 9.21547C15.6793 9.28376 15.6378 9.3458 15.5855 9.39804Z"
                                                  fill="white" />
                                        </svg>
                                    </a>
                                    }
                                </div>
                            </div>
                        </div>

</div>

</div>
                }
            }
        </div>
        <div class="swiper-pagination"></div>
    </div>

</section>

<script asp-add-nonce="true">

var Firstswiper = new Swiper(".heroSwiperNew", {
        effect: "fade",
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '"><span class="number">0' + (index + 1) + "</span></span>";
            },
        },

});
    Firstswiper.on('slideChange', function (e) {
        $('.first-fold.hero .swiper-pagination-bullet').removeAttr('style')
    });

var heroSwiper = new Swiper(".heroSwiper", {
        allowTouchMove: false,
        pagination: {
            el: ".swiper-pagination",
            type: "fraction",
            loop: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

var activeSlide, activeImg;
    $(".heroSwiper .swiper-button-next").click(function () {
        activeSlide = $(".heroSwiper .swiper-slide-active").attr("data-img");
        $(".hero-images .hero-img-wrapper").each(function () {
            $(this).removeClass("active");
        });
        activeImg = $('.hero-img-wrapper[data-img=' + activeSlide + ']')
        activeImg.addClass("active")
    })

$(".heroSwiper .swiper-button-prev").click(function () {
        activeSlide = $(".heroSwiper .swiper-slide-active").attr("data-img");
        $(".hero-images .hero-img-wrapper").each(function () {
            $(this).removeClass("active");
        });
        activeImg = $('.hero-img-wrapper[data-img=' + activeSlide + ']')
        activeImg.addClass("active")
    })
    /* $(document).ready(function() {
var activeSlide, activeImg;
heroSwiper.on('slideChange', function () {
    activeSlide = $(".heroSwiper .swiper-slide-active").attr("data-img");
    $(".hero-images .hero-img-wrapper").each(function () {
        $(this).removeClass("active");
    });
    activeImg = $('.hero-img-wrapper[data-img=' + activeSlide + ']')
    activeImg.addClass("active")
});
}); */</script>