[jQuery] 무한 롤링

데이터 바인딩을 포함한, 무한 롤링 예제

 

 

데이터 준비하기

var peopleData = [
  {
    id: 0,
    title: "1",
    img: "/assets/images/main/image2.png",
    href: "123",
  },
  {
    id: 1,
    title: "1",
    img: "/assets/images/main/image1.png",
    href: null,
  },
  {
    id: 2,
    title: "2",
    img: "/assets/images/main/image2.png",
    href: null,
  },
  {
    id: 3,
    title: "3",
    img: "/assets/images/main/image3.png",
    href: null,
  },
  {
    id: 4,
    title: "4",
    img: "/assets/images/main/image1.png",
    href: null,
  },
  {
    id: 5,
    title: "1",
    img: "/assets/images/main/image2.png",
    href: null,
  },
  {
    id: 6,
    title: "2",
    img: "/assets/images/main/image3.png",
    href: null,
  },
  {
    id: 7,
    title: "3",
    img: "/assets/images/main/image1.png",
    href: null,
  },
  {
    id: 8,
    title: "4",
    img: "/assets/images/main/image2.png",
    href: null,
  },
  {
    id: 9,
    title: "1",
    img: "/assets/images/main/image3.png",
    href: null,
  },
  {
    id: 10,
    title: "2",
    img: "/assets/images/main/image1.png",
    href: null,
  },
];

 

jQuery

  var $rollingScroll = $(".leftScroll");
  var $scrollItem = $rollingScroll.find(".scrollItem");
  var rowCount = 0;
  var count = 1;
  var Length = Data.length;
  for (var i = 0; i < Length; i++) {
    var $rowItem = $('<div class="Row"></div>');
    for (var j = 0; j < 2; j++) {
      var index = rowCount < Length ? rowCount : rowCount % Length;
      var elem = Data.find(function (x) {
        return x.id === index;
      });
      var $item = $('<div class="Item"></div>'),
        $anchorItem = $('<a class="Item"></a>');
      if (!elem.href) {
        $item.text(elem.title);
        $item.css("backgroundImage", "url(" + elem.img + ")");
        $rowItem.append($item);
      } else {
        $anchorItem.attr("href", elem.href);
        $anchorItem.text(elem.title);
        $anchorItem.css("backgroundImage", "url(" + elem.img + ")");
        $rowItem.append($anchorItem);
      }
      rowCount++;
      count += 1;
      if (count > 2) {
        $scrollItem.append($rowItem);
        count = 1;
      }
    }
  }
  $scrollItem.clone().addClass("cloneItem").appendTo($rollingScroll);
  $scrollItem.css("left", 0);
  $rollingScroll.find(".cloneItem").css("left", $scrollItem.width() + "px");

 

 

html

      <div class="leftScrollWrap">
        <div class="leftScroll">
          <div class="scrollItem"></div>
        </div>
      </div>

 

 

css

  .leftScrollWrap {
    height: 600px;
    .leftScroll {
      .scrollItem {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        position: absolute;
        width: auto;
        .Row {
          display: inline-flex;
          flex-direction: column;
          gap: 1.5rem;
          .Item {
            display: inline-block;
            width: 360px;
            height: 262px;
            margin: 15px;
            border-radius: 1.5rem;
            background-color: #000;
            @include bgInclude(cover);
            font-size: 0;
            line-height: 0;
          }
        }
        &:not(.cloneItem) {
          animation: 70s linear 0s infinite normal forwards running rollingleft1;
        }
        &.cloneItem {
          animation: 70s linear 0s infinite normal none running rollingleft2;
        }
      }
    }
  }