Javascript

<style>

    *{

        margin: 0px;

    }

    img{

        height: 100%;

        width: 100%;

    }

    #slider{

        height: 350px;

        position: relative;

    }

    #slider_image_text{

        position: absolute;

        top:100px;

        left:45%;

        font-size: 35px;

        font-family: Verdana, Geneva, Tahoma, sans-serif;

    }

</style>

<div id="slider">

    <img id="slider_image" src="./images/img3.jpg">

    <div id="slider_image_text"></div>

</div>

<script>

    count = 0

    slider_image_array =["./images/img1.jpg","./images/img2.jpg","./images/img3.jpg"]

    slider_image_text_array =["Hurry offer to the limited Date","Grab your offer","Happy Shopping"]

    setInterval(()=>{

        document.getElementById('slider_image').src = slider_image_array[count]

        document.getElementById('slider_image_text').innerHTML = slider_image_text_array[count]

        if(count < 2){

            count++;

        }else{

            count = 0

        }

    },2000)

</script>