Banner slider post type

// banner 

function banners_post() {
	$labels = array(
		'name'                  => _x( 'Banners', 'Post type general name'),
		'singular_name'         => _x( 'Banner', 'Post type singular name'),
		'menu_name'             => _x( 'Banners', 'Admin Menu text'),
		'name_admin_bar'        => _x( 'Banner', 'Add New on Toolbar'),
		'add_new'               => __( 'Add New'),
		'add_new_item'          => __( 'Add New Banner'),
		'new_item'              => __( 'New Banner'),
		'edit_item'             => __( 'Edit Banner'),
		'view_item'             => __( 'View Banner'),
		'all_items'             => __( 'All Banners'),
		'search_items'          => __( 'Search Banners'),
		'parent_item_colon'     => __( 'Parent Banners:'),
		'not_found'             => __( 'No Banners found.'),
		'not_found_in_trash'    => __( 'No Banners found in Trash.'),
	);

	$args = array(
		'labels'             => $labels,
		'public'             => true,
		'publicly_queryable' => true,
		'show_ui'            => true,
		'show_in_menu'       => true,
		'query_var'          => true,
		'rewrite'            => array( 'slug' => 'banner' ),
		'capability_type'    => 'post',
		'has_archive'        => true,
		'hierarchical'       => false,
		'menu_position'      => null,
		'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
	);

	register_post_type( 'banner', $args );
}

add_action( 'init', 'banners_post' );


function banner_loop() {
    $args = array(
        'post_type' => 'banner',
        'posts_per_page' => -1
    );

    $query = new WP_Query( $args );
?>
    <section class="bannerSlider slider">
        <?php
    if ( $query->have_posts() ) {
        
        while ( $query->have_posts() ) {
            $query->the_post();
            ?>
                    
            <div>
                <div class="bannerMain">
                    <div class="bannerContent">
                        <?php the_content(); ?>
<!--                         <h5><//?php the_field('banner_designation'); ?></h5> -->
                    </div>
                    <div class="identity">
						<h2><?php the_title(); ?></h2>
                        <?php the_post_thumbnail('full'); ?>
                    </div>
                </div>
            </div>
                
                
            <?php
        }

        // Reset post data
        wp_reset_postdata();
    }
    ?>
    </section>
    <?php
}
add_shortcode('our-banners','banner_loop');

// banners end



jquery
// Initialize Slick Slider for Banner Slider
jQuery(".bannerSlider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    arrows: false,
    prevArrow: '<button class="slide-arrow prev-arrow"></button>',
    nextArrow: '<button class="slide-arrow next-arrow"></button>',
    autoplay: true,
    autoplaySpeed: 5000,
    pauseOnDotsHover: true,
    adaptiveHeight: true,
});

// Initialize Slick Slider for Lazy Loading
jQuery(".lazy").slick({
    lazyLoad: 'ondemand', // ondemand progressive anticipated
    infinite: true
});

// Add Mouse Wheel Navigation
jQuery('.bannerSlider, .lazy').on('wheel', function (e) {
    e.preventDefault(); // Prevent default scrolling behavior
    if (e.originalEvent.deltaY < 0) {
        // Scroll up
        jQuery(this).slick('slickPrev');
    } else {
        // Scroll down
        jQuery(this).slick('slickNext');
    }
});



csss
.top-head h4.info-box-title {
    font-size: 24px !important;
		    line-height: 44px !important;
}

.top-icon .box-icon-wrapper.box-with-icon {
    margin-top: 34px;
}

.wd-header-nav {
    background: #191919;
		height: 60px;

}

span.nav-link-text {
    color: #fff;
    font-size: 18px;
		padding-top: 20px;
}

.info-img span.wd-btn-text {
    color: #d50404;
}

.info-img-1 .info-box-icon {
    width: 100% !important;
}

/* .info-img-1 img {
    width: 100% !important;
}
 */

.info-img span.wd-btn-text:hover {
    color: #000;
}


.bannerContent a {
    background: #ca0404;
    width: 50%;
    padding: 12px 23px;
    color: #fff;
    font-family: 'Poppins';
    font-weight: 500;
}

.bannerContent a:hover {
    background: #2d2d2d;
}


.info-img .btn.btn-style-link {
    border-bottom: none;
}

.info-img-1 .info-box-content {
    background-color: #fbfbfb;
    top: -15px;
    padding: 20px;
    border: 1px solid #999999;
		height: 176px;
}

.info-img .info-box-content {
    background-color: #fbfbfb;
    top: -15px;
    padding: 20px;
    border: 1px solid #999999;
		height: 176px;
}



.info-img-1 a.btn {
    background-color: #ca0404;
    color: #fff;
}

.btn.btn-color-default:hover {
    color: #fff !important;
}

span.fpara {
    color: #7f7f7f;
}

.copyrights-wrapper.copyrights-two-columns {
    display: none;
}


/* newsletter */
.elementor-field-group.elementor-column.elementor-field-type-submit.elementor-col-20.e-form__buttons {
    display: none;
}
/* newsletter */

/* .bannerContent h2 {
    position: absolute;
    top: 2%;
		left: 50%;
    font-size: 34px;
    color: #fff;
}

.bannerContent p {
    position: absolute;
    top: 12%;
    left: 50%;
    right: 5%;
    color: #fff;
} */

.bannerMain img {
    width: 100%;
}


.bannerContent {
    background: #000000ad !important;
    position: absolute;
    z-index: 999;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 50px;
}

.bannerMain {
    position: relative;
}

.bannerImg {
    position: relative;
    z-index: 0;
}

.bannerContent h2 {
    color: #fff;
    font-size: 30px;
}

.bannerContent p {
    color: #fff;
    font-size: 14px;
}

.bannerSlider {
    position: relative;
}

.bannerSlider ul {
    position: absolute;
    bottom: 0;
    display: flex;
    left: 70%;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 30%;
}

.bannerSlider ul li {
    margin: 0;
    width: 16.6%;
    background: linear-gradient(180deg, #383838, #1b1b1b);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1b1b1b;
    border-top: 1px solid #2e2e2e;
    border-bottom: 0;
}

.bannerSlider ul li button {
    background: transparent;
    color: #fff;
    font-size: 18px;
}

.menu li a {
    height: 59px;
    display: flex;
    padding: 0 10px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.menu li {
    height: 59px;
    display: flex;
}

.menu li a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0px;
    background: linear-gradient(180deg, #d60404, #940101);
    z-index: -1;
    left: 0;
}

.menu li a:hover:after {
    animation: slide-top 0.2s linear both;
}

.slide-top {
	animation: slide-top 0.5s linear both;
}

@keyframes slide-top {
  0% {
    height: 0;
  }
  100% {
    height: 60px;
  }
}

.wd-prefooter {
    padding: 0px;
}


span.auto-style1 {
    color: #E9322D;
    font-size: 28px;
}

.HVR-CLR a {
    color: #d50404;
		font-weight: 600;
}

.HVR-CLR a:hover {
    color: #000;
    text-decoration: underline;
}


input {
    border-color: #E9322D !important;
    color: #000 !important;
    border-radius: 7px !important;
    padding: 20px 10px !important;
}

textarea#wpforms-364-field_6 {
    border-color: #E9322D !important;
    color: #000 !important;
    border-radius: 7px !important;
}

button#wpforms-submit-364 {
    background-color: #000;
    color: #E9322D;
    border: none;
    border-radius: 6px;
    padding: 13px 40px;
    font-size: 16px;
}

input.s.wd-search-inited {
    border: 1px solid #D7D7D7 !important;
}

button.searchsubmit {
    color: #DE352C !important;
}

input.s {
    border-radius: 0px !important;
    border: none;
}


.chaatRow table th {
    border: 2px dashed #000;
}
.chaatRow table tbody td {
    border: 2px dashed #000;
}

::marker {
    color: #BF2130;
}


h2.head1 {
    text-transform: capitalize;
    margin-left: 22px;
    font-size: 30px;
}

h2.bgClr {
    background-color: #C02130;
    color: #fff;
    padding: 10px 30px;
    margin-left: 27px;
}

.chartRow1 table th {
    border: 2px dashed #000;
}
.chartRow1 table tbody td {
    border: 2px dashed #000;
}

.chartRow1 li {
	border-bottom: 2px dashed   #000;
	padding: 8px;
}

p.flexCon {
    font-size: 12px;
}

p.flexCon1 {
    font-size: 12px;
}

p.flexPrice {
    margin-bottom: 0px;
    margin-top: 36px;
}

.chartRow1 ul {
    margin: 0;
}
.chartRow1 ul li:last-child {
    border: none;
}
p.flexCon {
    padding-left: 50px;
}

.chartData p.flexCon {
    padding-left: 50px;
}
.chartRow1 table tbody .chartData ul li {
    padding-bottom: 0;
}

h3.bgClr {
    background-color: #C02130;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 26px;
}


.chartRow3 li div {
    display: flex;
    justify-content: space-between;
}
.chartRow3 li {
    list-style: none;
    border: none;
    position: relative;
}
.chartRow3 li:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    border-top: 2px dashed #000;
    right: 100px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.chartRow3 li div h2 {
    margin: 0;
}

.chartRow3 li:nth-child(1):after {
    width: 69%;
}
.chartRow3 li:nth-child(2):after {
    width: 57%;
}
.chartRow3 li:nth-child(3):after {
    width: 45%;
}
.chartRow3 li:nth-child(4):after {
    width: 24%;
}
.chartRow3 li:nth-child(5):after {
    width: 33%;
}
.chartRow3 li:nth-child(6):after {
    width: 29%;
}
.chartRow3 li:nth-child(7):after {
    width: 30%;
}
.chartRow3 li:nth-child(8):after {
    width: 22%;
}

ul.chartRow3.flexChart li div h2 {
    display: flex;
    flex-direction: column;
}

ul.chartRow3.flexChart li div h2 p {
    font-size: 17px;
}

ul.chartRow3.flexChart li:nth-child(1):after {
    width: 43%;
    top: -20px;
}

ul.chartRow3.flexChart li:nth-child(2):after {
    width: 64%;
    top: -30px;
}

ul.chartRow3.flexChart li:nth-child(3):after {
    top: -10px;
    width: 41%;
}

ul.chartRow3.flexChart li:nth-child(4):after {
    width: 67%;
}

ul.chartRow3.flexChart li:nth-child(5):after {
    width: 47%;
}

ul.chartRow3.flexChart.flexChart1 li:nth-child(1):after {
    width: 67%;
    top: -40px;
}

ul.chartRow3.flexChart.flexChart1 li:nth-child(2):after {
    width: 66%;
    top: -40px;
}

ul.chartRow3.flexChart.flexChart1 li:nth-child(3):after {
    width: 60%;
    top: -42px;
}

ul.chartRow3.flexChart.flexChart2 li:nth-child(1):after {
    width: 60%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow3.flexChart.flexChart2 li:nth-child(2):after {
    width: 60%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow3.flexChart.flexChart2 li:nth-child(3):after {
    width: 62%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow3.flexChart.flexChart2 li:nth-child(4):after {
    width: 41%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow3.flexChart.flexChart2 li:nth-child(5):after {
    width: 43%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow5.chartRow3.flexChart li:nth-child(1):after {
    width: 60%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow5.chartRow3.flexChart li:nth-child(2):after {
    width: 58%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow5.chartRow3.flexChart li:nth-child(3):after {
    width: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
}

ul.chartRow5.chartRow3.flexChart.flexChart1 li:nth-child(1):after {
    width: 50%;
}

ul.chartRow5.chartRow3.flexChart.flexChart1 li:nth-child(2):after {
    width: 55%;
}

ul.chartRow5.chartRow3.flexChart.flexChart1 li:nth-child(3):after {
    width: 57%;
    top: 25px;
}