Slider

HTML

<head>
    <title>Serviços</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles/servicos.css">
    <style>


    </style>
  </head>

  <body>
    <div class="wrap">
      <div id="arrow-left" class="arrow"></div>
      <div id="slider">
        <table width="95%" align="center" class="slide">
          <tr>
            <td width="20%" bgcolor="#f2ebe1" height="90">
              <div style="padding-left: 20px;">
                <p style="color: rgb(201, 157, 67); letter-spacing: 3px; font-size: 14px;">JUPITER ALGARVE HOTEL</p>
                <h1 style="color: #575c73; font-size: 40px;">
                  Facilidades Hotel
                </h1>
                <hr>
                <ul>
                  <li>Wi-Fi Grátis em todo o Hotel</li>
                  <li>Ar Condicionado</li>
                  <li>Área para Não Fumadores</li>
                  <li>Serviço de Lavandaria</li>
                  <li>Serviço de Concierge (bilheteira, excursões, informações turísticas)</li>
                  <li>Serviço de Bagageiro/portaria</li>
                  <li>Parking (custo-extra)</li>
                  <li>Transfer Aeroporto</li>
                </ul>
              </div>
            </td>
            <td width="50%" height="90">
              <div class="slide1">
                <div class="slide-content">
                </div>
              </div>
            </td>
          </tr>
        </table>
        <table width="95%" align="center" class="slide">
          <tr>
            <td width="20%" bgcolor="#f2ebe1" height="90">
              <div style="padding-left: 20px;">
                <p style="color: rgb(201, 157, 67); letter-spacing: 3px; font-size: 14px;">JUPITER ALGARVE HOTEL</p>
                <h1 style="color: #575c73; font-size: 40px;">
                  Serviços 24 horas
                </h1>
   ...

CSS

body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image: url("https://s15.postimg.cc/kgkf854kr/servico1.jpg");
}
.slide2 {
  background-image: url("https://s15.postimg.cc/liulqqd4b/servico2.jpg") ;
}
.slide3 {
  background-image: url("https://s15.postimg.cc/ya8rx9a1n/servico3.jpg");
}
.slide4 {
  background-image: url("https://s15.postimg.cc/xkpzkwwnf/servico4.jpg");
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 20px 30px 20px 0;
  border-color: transparent #a6a6a6 transparent transparent;
  left: 0;
  margin-left: 7px;
}

#arrow-right {
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #a6a6a6;
  right: 0;
  margin-right: 25px;
}

hr
{
  width: 25%;
  margin-right: 510px;
  height: 3px;
  background-color: rgb(199, 155, 75);
  border: none;
  height: 1px;
}
ul
{
  display: block;
  margin-top: 1em;
  margin-bottom: 1 em;
  line-height: 35px;
  color: #323647;
}

JavaScript

let sliderImages = document.querySelectorAll(".slide"),
		arrowLeft = document.querySelector("#arrow-left"),
		arrowRight = document.querySelector("#arrow-right"),
		current = 0;

    // Limpar todas as imagens
    function reset() {
    	for (let i = 0; i < sliderImages.length; i++) {
    		sliderImages[i].style.display = "none";
    	}
    }

    // Init slider
    function startSlide() {
    	reset();
    	sliderImages[current].style.display = "block";
    }

    //Mostrar anterior
    function slideLeft() {
    	reset();
    	if (current > 0) {
    		current--;
    	}
    	sliderImages[current].style.display = "block";
    }

    // Mostrar seguinte
    function slideRight() {
    	reset();
    	if (current < sliderImages.length) {
    		current++;
    	}

    	sliderImages[current].style.display = "block";
    }

    // esquerda seta click
    arrowLeft.addEventListener("click", function() {

    	slideLeft();
    });

    // direita seta click
    arrowRight.addEventListener("click", function() {

    	slideRight();
    });

    startSlide();