How to add space between items in carousel

Question

I'm trying to add a space between the items of my carousel, but I can't seem to find the right approach for it.

Could someone help me add space between the items? And perhaps make it loop, for when I reach the end of the carousel it just begins with the first one again.

Any help is very much appreciated, thank you! :)

``` .slider-wrapper {
  /* First */
  /* Second */
  /* Third */
  /* Fourth */
  /* Fifth */
  border: red dotted 5px;
}

.slider-wrapper body {
  margin: 0;
  color: #fff;
  border: red dotted 5px;
  font-family: sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100vh;
}

.slider-wrapper .slider {
  width: 100%;
}

.slider-wrapper .slider input {
  display: none;
}

.slider-wrapper .testimonials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  min-height: 450px;
}

.slider-wrapper .testimonials .item {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 250px;
  height: 400px;
  text-align: center;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-transform-style: preserve-3d;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.slider-wrapper .testimonials .item a {
  height: 400px;
  display: none;
  position: absolute;
  width: 250px;
  top: 0px;
  left: 0px;
  opacity: 0.3;
}

.slider-wrapper .testimonials .item img {
  width: 100px;
  height: 100%;
  width: 100%;
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
  -webkit-transition: -webkit-filter 0.4s;
  transition: -webkit-filter 0.4s;
  transition: filter 0.4s;
  transition: filter 0.4s, -webkit-filter 0.4s;
}

.slider-wrapper .testimonials .item p {
  color: #ddd;
}

.slider-wrapper .testimonials .item h2 {
  font-size: 14px;
}

.slider-wrapper .dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.slider-wrapper .dots label {
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  cursor: pointer;
  background-color: salmon;
  margin: 7px;
  -webkit-transition: color 0.2s, -webkit-transform 0.2s;
  transition: color 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, color 0.2s;
  transition: transform 0.2s, color 0.2s, -webkit-transform 0.2s;
}

.slider-wrapper #t-1:checked~.dots label[for="t-1"] {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.slider-wrapper #t-1:checked~.dots label[for="t-2"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-1"] {
  z-index: 4;
  -webkit-box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
  box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-1"] a {
  display: block;
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-1"] img {
  -webkit-filter: none;
  filter: none;
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-2"] {
  -webkit-transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  z-index: 3;
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-3"] {
  -webkit-transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
  transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
  z-index: 2;
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-4"] {
  -webkit-transform: translateX(600px) translateZ(-270px) rotateY(-35deg);
  transform: translateX(600px) translateZ(-270px) rotateY(-35deg);
  z-index: 1;
}

.slider-wrapper #t-1:checked~.testimonials label[for="t-5"] {
  -webkit-transform: translateX(800px) translateZ(-360px) rotateY(-45deg);
  transform: translateX(800px) translateZ(-360px) rotateY(-45deg);
}

.slider-wrapper #t-2:checked~.dots label[for="t-1"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-2:checked~.dots label[for="t-2"] {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.slider-wrapper #t-2:checked~.dots label[for="t-3"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-1"] {
  -webkit-transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
  transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-2"] {
  z-index: 3;
  -webkit-box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
  box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-2"] a {
  display: block;
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-2"] img {
  -webkit-filter: none;
  filter: none;
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-3"] {
  -webkit-transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  z-index: 2;
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-4"] {
  -webkit-transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
  transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
  z-index: 1;
}

.slider-wrapper #t-2:checked~.testimonials label[for="t-5"] {
  -webkit-transform: translateX(600px) translateZ(-270px) rotateY(-35deg);
  transform: translateX(600px) translateZ(-270px) rotateY(-35deg);
}

.slider-wrapper #t-3:checked~.dots label[for="t-2"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-3:checked~.dots label[for="t-3"] {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.slider-wrapper #t-3:checked~.dots label[for="t-4"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-1"] {
  -webkit-transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
  transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-2"] {
  -webkit-transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
  transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-3"] {
  z-index: 3;
  -webkit-box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
  box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-3"] a {
  display: block;
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-3"] img {
  -webkit-filter: none;
  filter: none;
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-4"] {
  -webkit-transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  z-index: 2;
}

.slider-wrapper #t-3:checked~.testimonials label[for="t-5"] {
  -webkit-transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
  transform: translateX(400px) translateZ(-180px) rotateY(-25deg);
}

.slider-wrapper #t-4:checked~.dots label[for="t-3"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-4:checked~.dots label[for="t-4"] {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.slider-wrapper #t-4:checked~.dots label[for="t-5"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-1"] {
  -webkit-transform: translateX(-600px) translateZ(-270px) rotateY(35deg);
  transform: translateX(-600px) translateZ(-270px) rotateY(35deg);
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-2"] {
  -webkit-transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
  transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-3"] {
  -webkit-transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
  transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
  z-index: 2;
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-4"] {
  z-index: 3;
  -webkit-box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
  box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-4"] a {
  display: block;
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-4"] img {
  -webkit-filter: none;
  filter: none;
}

.slider-wrapper #t-4:checked~.testimonials label[for="t-5"] {
  -webkit-transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
  transform: translateX(200px) translateZ(-90px) rotateY(-15deg);
}

.slider-wrapper #t-5:checked~.dots label[for="t-4"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.slider-wrapper #t-5:checked~.dots label[for="t-5"] {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-1"] {
  -webkit-transform: translateX(-800px) translateZ(-360px) rotateY(45deg);
  transform: translateX(-800px) translateZ(-360px) rotateY(45deg);
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-2"] {
  -webkit-transform: translateX(-600px) translateZ(-270px) rotateY(35deg);
  transform: translateX(-600px) translateZ(-270px) rotateY(35deg);
  z-index: 1;
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-3"] {
  -webkit-transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
  transform: translateX(-400px) translateZ(-180px) rotateY(25deg);
  z-index: 2;
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-4"] {
  -webkit-transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
  transform: translateX(-200px) translateZ(-90px) rotateY(15deg);
  z-index: 3;
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-5"] {
  z-index: 4;
  -webkit-box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
  box-shadow: 0px 0px 18px 4px rgba(0, 0, 0, 0.67);
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-5"] a {
  display: block;
}

.slider-wrapper #t-5:checked~.testimonials label[for="t-5"] img {
  -webkit-filter: none;
  filter: none;
}


/*# sourceMappingURL=carousel.css.map */

<div class="slider-wrapper">
  <div class="slider">
    <input type="radio" name="testimonial" id="t-1">
    <input type="radio" name="testimonial" id="t-2">
    <input type="radio" name="testimonial" id="t-3" checked>
    <input type="radio" name="testimonial" id="t-4">
    <input type="radio" name="testimonial" id="t-5">
    <div class="testimonials">
      <label class="item" for="t-1">
            <img src="photos/bookcover/Alluredbyyou.jpg">
            <a href="https://www.nicolelundrigan.com/unraveling-arva"></a>
          </label>
      <label class="item" for="t-2">
             <img src="photos/bookcover/Notyourmarrysue.jpg">
            <a href="https://www.nicolelundrigan.com/glass-boys"></a>       
          </label>
      <label class="item" for="t-3">
            <img src="photos/bookcover/thewolf.png" alt="picture">
            <a href="https://www.nicolelundrigan.com/thesubstitute"></a>
          </label>
      <label class="item" for="t-4">
            <img src="photos/bookcover/EJ.png">
          <a href="https://www.nicolelundrigan.com/the-widow-tree"></a>
          </label>
      <label class="item" for="t-5">
            <img src="photos/bookcover/Ironfists.png">
            <a href="https://www.nicolelundrigan.com/thaw"></a>
          </label>


    </div>
    <div class="dots">
      <label for="t-1"></label>
      <label for="t-2"></label>
      <label for="t-3"></label>
      <label for="t-4"></label>
      <label for="t-5"></label>

    </div>
  </div>
</div>