在指定的间隔时间内更改图像和文本

Question

我在列表中有一些图像。我想每30秒一个一个地改变图像。我已经为前一个和下一个放置了2个图像，点击上一个或下一个图像应该更改。

我不知道该怎么做。

我的代码是，

<div class="slider">
    <div class="slider_below">
        <ul>
            <li>
                <img src="assets/img/slider/slider1.jpg" alt="Slider 1" title="Slider 1" />
                <div class="text" align="center">
                    <h1>Clearence Sale</h1>
                    <h1>Get upto 50% Off</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                <div class="next_button">
                    <img src="assets/img/prev.png" alt="Slider Previous" title="Slider Previous" class="prev" />
                    <img src="assets/img/next.png" alt="Slider Next" title="Slider Next" class="next" />
                </div>
            </li>
            <li>
                <img src="assets/img/slider/slider2.jpg" alt="Slider 2" title="Slider 2" />
                <div class="text" align="center">
                    <h1>Clearence Sale</h1>
                    <h1>Get upto 50% Off</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                <div class="next_button">
                    <img src="assets/img/prev.png" alt="Slider Previous" title="Slider Previous" class="prev" />
                    <img src="assets/img/next.png" alt="Slider Next" title="Slider Next" class="next" />
                </div>
            </li>
        </ul>
    </div>
</div>