index.html

<!DOCTYPE html>
<html>
<head>
    <title>Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider">
        <ul>
            <li>
                <img src="img/1.jpg">
                <p class="slider-text">Click to the left or right side of photo</p>
            </li>

            <li>
                <img src="img/2.jpg">
                <p class="slider-text">Only 4 photos in this slider</p>
            </li>

            <li>
                <img src="img/3.jpg">
                <p class="slider-text">Slider have an infinite loop</p>
            </li>

            <li>
                <img src="img/4.jpg">
                <p class="slider-text">This is last photo</p>
            </li>
        </ul>

        <a class="prev" title="previous"></a>
        <a class="next" title="next"></a>
    </div>

    <script src="slider.js"></script>
</body>
</html>