Display Banners TP

[Kernal]

Code Select Expand

<!-- ==========================================================
     Kernal Components Library (KERNAL CODED)  V 1.6

Updated the Banner system on here to display more banners
as needed Code Kernal 2026!
 ========================================================== -->

<style>
.kcl-wrapper{
    --bg:#dfe5ea;
    --card:#ffffff;
    --card2:#f4f4f4;
    --border:#c6d2da;
    --hover:#8aa0ac;
    --shadow:rgba(0,0,0,.18);
    font-family:Arial,sans-serif;
}

.kcl-wrapper *,
.kcl-wrapper *:before,
.kcl-wrapper *:after{
    box-sizing:border-box;
}

.carousel{
    position:relative;
    overflow:hidden;
    background:var(--bg);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.slide{
    display:none;
    padding:12px 10px;
}

.slide.active{
    display:block;
    animation:fade .8s ease;
}

.grid{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.card{
    display:flex;
    justify-content:center;
    align-items:center;
    width:220px;
    height:60px;
    padding:5px;
    background:linear-gradient(#fff,var(--card2));
    border:1px solid var(--border);
    border-radius:5px;
    overflow:hidden;
    text-decoration:none;
    transition:.25s ease;
}

.card:hover{
    border-color:var(--hover);
    box-shadow:0 8px 18px var(--shadow);
    transform:translateY(-3px) scale(1.02);
}

.card img{
    width:100%;
    height:100%;
    object-fit:contain;
}

@keyframes fade{
    from{
        opacity:.2;
    }
    to{
        opacity:1;
    }
}

@media(max-width:768px){

    .grid{
        flex-direction:column;
    }

    .card{
        width:90%;
        max-width:320px;
    }

}
</style>


<div class="kcl-wrapper">

<div class="carousel" id="kcl-carousel">


<div class="slide active">
<div class="grid">

<a class="card" href="https://www.tinyportal.net" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/TinyPortalv8.jpg">
</a>

<a class="card" href="https://www.drbobsgunbits.com" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/DrBob.jpg">
</a>

<a class="card" href="https://www.customstock.co.uk" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/customstocks.jpg">
</a>

<a class="card" href="https://www.airgunbuyer.com" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/BlackpoolAirguns_234x60px.jpg">
</a>

</div>
</div>


<div class="slide">
<div class="grid">

<a class="card" href="https://bamfordguns.co.uk/" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/Bamfords.jpg">
</a>

<a class="card" href="https://www.cheshiregunroom.com/" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/CheshireGunRoom.jpg">
</a>

<a class="card" href="https://www.jackpyke.co.uk/" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/JackPyke.jpg">
</a>

<a class="card" href="https://www.yorkshiresportingguns.co.uk/" target="_blank">
<img src="https://rapidforum.co.uk/forum/Advertise/YorkshireSportingGuns5.jpg">
</a>

</div>
</div>


</div>
</div>


<script>
(function(){

const carousel=document.getElementById("kcl-carousel");
const slides=carousel.querySelectorAll(".slide");

let current=0;
let timer;


function nextSlide(){

    slides[current].classList.remove("active");

    current++;

    if(current >= slides.length){
        current=0;
    }

    slides[current].classList.add("active");

}


function startCarousel(){

    timer=setInterval(nextSlide,8000);

}


function stopCarousel(){

    clearInterval(timer);

}


carousel.addEventListener("mouseenter",stopCarousel);
carousel.addEventListener("mouseleave",startCarousel);


startCarousel();


})();
</script>

Enjoy any problems with adjusting this code to suit your site just ask below.

[Kernal]

Enjoy this banner system — it's simple, easy to use, and works perfectly in TP as intended!

Instructions

It's really simple! Just take a look at the code and replace the hyperlinks with the image URLs you want to display on your forum.

That's all there is to it!

If you have any questions or need any help setting it up, just ask here.