CodePen Embed - infiniteslider

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stories-of.com/relive/wp-content/themes/original/js/infiniteslidev2.js"></script>
<section class="p-swiper">
  <div class="p-swiper1">
    <ul class="p-swiper1__wrap">
      <li class="slide">
        <p class="p-swiper__text">
          Slider Contents
        </p>
        <img class="p-swiper__img" src="https://stories-of.com/relive/wp-content/uploads/2023/12/star.png" alt="星">
        <div class="p-swiper__textWrap">
          <div class="p-swiper__contentsCol">
            <div class="p-swiper__contentsImg">
              <img class="" src="https://stories-of.com/relive/wp-content/uploads/2023/09/dummy__600-400.jpg" alt="dummy">
            </div>
            <div class="p-swiper__contentsTextArea">
              <p class="p-swiper__contentsText">テキストテキストテキストテキストテキスト</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>

.p-swiper {
  background-color: #328ae1;
  padding-bottom: 20px;
  padding-top: 20px;
}
.p-swiper1__wrap{
  margin-left:-40px; 
}
.p-swiper__text {
  color: #fff;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-right:20px;
}

.p-swiper__img {
  max-width: 60px;
  width: auto !important;
  display: block;
  height: auto;
  margin-right:20px;
}

.p-swiper__contentsCol {
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  gap: 28px;
  height: 80px;
  justify-content: center;
  padding: 20px 20px;
  width: 320px;
  box-sizing: border-box;
}
.p-swiper__contentsImg img{
  width: 80px;
  display: block;
  height: auto;
  box-sizing: border-box;
}

.p-swiper__contentsTextArea {
  display: flex;
  flex-direction: column;
}

.p-swiper__contentsText {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.p-swiper__contentsNumber {
  color: #328ae1;
  font-size: 55px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.p-swiper__contentsNumberSpan {
  color: #67a13f;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.2142857143;
}
.p-swiper__textWrap{
  margin-right:60px;
}


 $(function() {
    $('.slide').infiniteslide({
      'speed': 60,
      'direction': 'left',
      'pauseonhover': false,
      'clone': 2,
    });
  })

This Pen is owned by 厚志 on CodePen.

See more by @ysgvpzlm-the-looper on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.