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">
        <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">
              <h3 class="p-swiper__contentsText">記事見出し</p>
              <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__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: 20px;
  justify-content: center;
  padding: 20px 20px;
  max-width: 320px;
  box-sizing: border-box;
}
.p-swiper__contentsImg img{
  width: 80px;
  display: block;
  height: auto;
  box-sizing: border-box;
}


.p-swiper__contentsText {
  flex: 1;
  font-size: 14px;
}

.p-swiper__textWrap{
  margin-right:20px;
}


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

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.