1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

    <?php include_once("./_common2.php"); ?>
 
 <style>
  .slider-container { position: relative; overflow: hidden; max-width: 100%; }
  .slider-track { display: flex; transition: transform 0.5s ease; flex-wrap: nowrap; }
  .slider-track .rv_flex_wrap { display: flex; flex-wrap: wrap; width: 100%; flex: 0 0 100%; gap: 15px; justify-content: space-between; box-sizing: border-box; }
  .rv_bg { width: 25%; max-width: 250px; text-align: left; padding: 15px; border: 1px solid #ddd; border-radius: 15px; box-sizing: border-box; }
  .rv_bg span { font-size: 14px; line-height: 1.25; }
  .rv_bg .company-sd {margin-bottom:10px}
  .rv_bg .company-sd b { font-size: 13px;  }
  .rv_bg .company-sd:nth-child(2) {display: flex;  justify-content: space-between;}
  .rv_bg .company-sd:nth-child(2) b { max-width: 65px; margin-right: 0;  }
  .rv_bg .company-sd small { font-size: 13px; width: 45px; display: inline-block; text-align: center; background-color: #ECF7FF; color: #666; padding: 0 5px; border-radius: 30px;}
  .slider-controls { position: absolute; top: 45%; width: 1220px; display: flex ; justify-content: space-between; margin-top: 0; left: 50%; transform: translate(-50%, -50%);}
  .slider-controls button {padding:5px 17px; font-size:30px; background-color:#fff; border:0; border-radius:100px; cursor:pointer} 
 </style>

<div style="display:flex; align-items:center; justify-content:space-between;  font-size:15px;  margin: 0 10px 10px;">
    <b>ERP 사용후기</b>
    <p id="rv-count"></p>
</div>

<div class="slider-container">
  <div class="slider-track" id="slider-track">
    <!-- 여기에는 jQuery로 #original-items 내용이 16개씩 렌더링 -->
  </div>  
</div>

<div id="original-items" class="rv_flex_wrap" style="display:none">
<? include("erp_rv_popup_inc.php");  ?>
</div>

<script>
$(document).ready(function () {
    var $track = $('#slider-track');
  var $sourceItems = $('#original-items .rv_bg');
  var itemsPerPage = 16;
  var totalPages = Math.ceil($sourceItems.length / itemsPerPage);
  var currentPage = 0;

    // 개수 세기
   var rvCount = $('#original-items .rv_bg').length;
  $('#rv-count').html('건수 : <strong>' + rvCount + '</strong> 건');

  function renderPage(page) {
    $track.empty();
    var $wrapper = $('<div class="rv_flex_wrap"></div>');
    var start = page * itemsPerPage;
    var end = start + itemsPerPage;
    $sourceItems.slice(start, end).each(function() {
      $wrapper.append($(this).clone());
    });
    $track.append($wrapper);
  }

  $('#prevBtn').on('click', function() {
    if (currentPage > 0) {
      currentPage--;
      renderPage(currentPage);
    }
  });

  $('#nextBtn').on('click', function() {
    if (currentPage < totalPages - 1) {
      currentPage++;
      renderPage(currentPage);
    }
  });

  renderPage(currentPage);
 /* const $items = $('.rv_bg');
  const itemsPerClick = 16; 
  let visibleCount = itemsPerClick;
 
  $items.hide().slice(0, visibleCount).show();

  $('#loadMoreBtn').click(function () {
    $items.slice(visibleCount, visibleCount + itemsPerClick).fadeIn();
    visibleCount += itemsPerClick;
 
    if (visibleCount >= $items.length) {
      $(this).hide();
    }
  }); */
});
</script>