<div class="scale">
  
<div class="slider">
  <div class="items">
    <div class="items_line">
      <div class="item">
      <p class="icon"></p>
      <div>
      <p>
        <span>&laquo;</span>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam reiciendis nostrum ducimus cum blanditiis voluptatem hic repellendus ut officia, temporibus consequuntur sit magnam atque sint odit voluptatibus adipisci voluptates sed!</span>
        <span>&raquo;</span>
      </p>
      <p>
        <span class="line"></span>
        <span>Jon Doe</span>
      </p>
      </div>
    </div>
      <div class="item">
      <p class="icon"></p>
      <div>
      <p>
        <span>&laquo;</span>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam reiciendis nostrum ducimus cum blanditiis voluptatem hic repellendus ut officia, temporibus consequuntur sit magnam atque sint odit voluptatibus adipisci voluptates sed!</span>
        <span>&raquo;</span>
      </p>
      <p>
        <span class="line"></span>
        <span>Will Patterson</span>
      </p>
      </div>
    </div>
      <div class="item">
      <p class="icon"></p>
      <div>
      <p>
        <span>&laquo;</span>
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam reiciendis nostrum ducimus cum blanditiis voluptatem hic repellendus ut officia, temporibus consequuntur sit magnam atque sint odit voluptatibus adipisci voluptates sed!</span>
        <span>&raquo;</span>
      </p>
      <p>
        <span class="line"></span>
        <span>Jane Doe</span>
      </p>
      </div>
    </div>
     </div>
  </div>
  <div class="slider_controls">
    <div class="control_left">
      <svg viewBox="0 0 50 50" width="50px">
        <path d="M40,0 25,25 40,50" 
              fill="none" stroke="#000" stroke-width="1" />
      </svg>
    </div>
    <div class="control_right">
      <svg viewBox="0 0 50 50" width="50px">
        <path d="M10,0 25,25 10,50" 
              fill="none" stroke="#000" stroke-width="1" />
      </svg>
    </div>
  </div>
</div>
  
</div>

.scale{
  transform: scale(0.7);
  display: flex;
  justify-content: center;
}

.copy{
  transform-box: fill-box;
  transform: scaleX(-1)translateX(-20px);
  stroke: #fff;
}

.slider{
  position: relative;
  min-width: 800px;
  max-width: 900px;
  margin: auto;
}

.slider_controls{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

.items{
  width: 700px;
  margin: auto;
  overflow: hidden;
}

.items_line{
  display: flex;
  width: 2100px;
  position: relative;
  left: 0; 
  transition: 0.2s linear;
}

.icon{
  width: 300px
}

.item{
  display: flex;
  align-items: center;
  gap: 20px;
  width: 740px;
}

.slider_controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control_left,.control_right{
  cursor: pointer;
}

.control_left{
  margin-left: -25px;
}
.control_right{
  margin-right: -15px;
}

.control_left:hover svg path,
.control_right:hover svg path{
  stroke: red;
}

let line = `<svg viewBox="0 0 20 5" width="40"><path d="M0,2.5 20,2.5" stroke="#000" stroke-width="0.7"/></svg>`;

let message = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="100%" height="100%" fill="transparent" ry="1" stroke="#000" stroke-width="0.2"/><path d="M7 21V16H4V4H20V16H12L7 21Z" id="copy"/><use href="#copy" x="2" y="-2" class="copy"/></svg>`;

document.querySelectorAll(".line").forEach(function (el){
  el.innerHTML = line
})

document.querySelectorAll(".icon").forEach(function (el){
  el.innerHTML = message;
})

let left = document.querySelector(".control_left");
let right = document.querySelector(".control_right");
let step = 0;

left.addEventListener("click", function (){
  step += 700;
  if(step > 1400){
    step = 0;
  }
  document.querySelector(".items_line").style.left = -step + "px";
})

right.addEventListener("click", function (){
  step -= 700;
  if(step < 0){
    step = 700;
  }
  document.querySelector(".items_line").style.left = -step + "px";
})