home slider html

 if (is_front_page()) : ?>

    <!-- Your HTML content goes here -->

    <div class="custom-slider">

        <div class="slider-item">

            <img src="https://ilavanam.com/wp-content/uploads/2023/06/Full-width-slider-v1.1.png" alt="Slide 1">

        </div>

        <div class="slider-item">

            <img src="https://ilavanam.com/wp-content/uploads/2023/06/Full-width-slider-rice.png" alt="Slide 2">

        </div>

        <!-- Add more slides as needed -->

    </div>

<?php endif; ?>

<?php

function enqueue_custom_slider_scripts() {

    wp_enqueue_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array('jquery'), '1.8.1', true);

    wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css', array(), '1.8.1');

    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css', array(), '6.3.0'); // Load Font Awesome

}

add_action('wp_enqueue_scripts', 'enqueue_custom_slider_scripts');

function initialize_custom_slider() {

    if (is_front_page()) { // Only on the home page

        echo '<style>

            /* Style Font Awesome icons */

            .custom-slider button.slick-prev,

            .custom-slider button.slick-next {

                background: none;

                border: none;

                font-size: 30px; /* Adjust the icon size */

                color: #333; /* Adjust the icon color */

            }

        </style>';

        echo '<script>

            jQuery(document).ready(function($) {

                $(".custom-slider").slick({

                    slidesToShow: 1, // Number of slides to show

                    slidesToScroll: 1, // Number of slides to scroll

                    autoplay: true, // Auto-play

                    autoplaySpeed: 2000, // Auto-play interval in milliseconds

                    arrows: true, // Display navigation arrows

                    prevArrow: "<button type=\'button\' class=\'slick-prev\'><i class=\'fas fa-chevron-left\'></i></button>", // Use Font Awesome icon for the left arrow

                    nextArrow: "<button type=\'button\' class=\'slick-next\'><i class=\'fas fa-chevron-right\'></i></button>", // Use Font Awesome icon for the right arrow

                });

            });

        </script>';

    }

}

add_action('wp_footer', 'initialize_custom_slider');

?>