Php Slider Yardım

Görüşünüşü aşağıdaki gibi olan bir sliderım var. Php koduda aşağıda mevcut. Bundan bağımsız olarak Verdiğim 2. görseldeki gibi kırmızı bir banner yaratmak istiyorum tam bunların ikisinin toplam boyutunda. Ve mobile uyumlu olarak.

Ücretli ücretsiz desteğe ihtiyacım var.







İstenilen





Yardımcı olması açışından kullanılan kod.

<div class="container">
  <h2></h2>
   <section class="customer-logos slider"  style="padding-bottom:0px;">
    <div class="slide"><a href="xxxx.com" ><img src="https://xxx.com"></a></div>     
     <div class="slide"><a href="xxxx.com" ><img src="[COLOR=#D9DAE9][FONT=Open Sans]https://xxx.com[/FONT][/COLOR] "></a></div>     
     <div class="slide"><a href="[COLOR=#D9DAE9][FONT=Open Sans]https://xxx.com[/FONT][/COLOR] "><img src="[COLOR=#D9DAE9][FONT=Open Sans]https://xxx.com[/FONT][/COLOR] " ></a></div> 
     <div class="slide"><a href="[COLOR=#D9DAE9][FONT=Open Sans]https://xxx.com[/FONT][/COLOR] "><img src="[COLOR=#D9DAE9][FONT=Open Sans]https://xxx.com[/FONT][/COLOR] " ></a></div>     
    
   </section>


</div>
<script>
var jQueryCalis = $.noConflict( true );
    (function($)
    {


$(document).ready(function(){
    $('.customer-logos').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3200,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 780,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 1
            }
        }]
    });
});
    })(jQueryCalis);

</script>
<style>
h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 5px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
</style>

<div class="container">
 <h2></h2>
     <section style="width:100%;height:75px;line-height:75px;">
          <img src="xxxxxx.com" style="width:100%;max-height:75px;">
     </section>
  <section class="customer-logos slider"  style="padding-bottom:0px;">
  <div class="slide"><a href="xxxx.com" ><img src="https://xxx.com"></a></div>   
 <div class="slide"><a href="xxxx.com" ><img src="https://xxx.com"></a></div>     
 </section>
</div>

hocam özelden bir sorum olucak çok teşekkür ederim