웹 | 슬릭슬라이드 그리드(바둑판)형태로 출력되게 하는 방법
페이지 정보
작성자 김진희 조회19,466회 댓글0건본문
슬릭슬라이드 그리드(바둑판)형태로 출력되게 하는 방법
예시사이트 : https://codepen.io/booom/pen/dyYjREp
<style>
.slide-item {
background-color: rebeccapurple;
color: aqua;
display: flex !important;
justify-content: center;
align-items: center;
text-align: center;
height: 200px;
border: 1px solid white;
}
</style>
<div class="slick-wrapper">
<div id="slick1">
<div class="slide-item"><h3>1</h3></div>
<div class="slide-item"><h3>2</h3></div>
<div class="slide-item"><h3>3</h3></div>
<div class="slide-item"><h3>4</h3></div>
<div class="slide-item"><h3>5</h3></div>
<div class="slide-item"><h3>6</h3></div>
<div class="slide-item"><h3>7</h3></div>
<div class="slide-item"><h3>8</h3></div>
<div class="slide-item"><h3>9</h3></div>
<div class="slide-item"><h3>10</h3></div>
<div class="slide-item"><h3>11</h3></div>
<div class="slide-item"><h3>12</h3></div>
<div class="slide-item"><h3>13</h3></div>
<div class="slide-item"><h3>14</h3></div>
<div class="slide-item"><h3>15</h3></div>
<div class="slide-item"><h3>16</h3></div>
<div class="slide-item"><h3>17</h3></div>
<div class="slide-item"><h3>18</h3></div>
<div class="slide-item"><h3>19</h3></div>
<div class="slide-item"><h3>20</h3></div>
<div class="slide-item"><h3>21</h3></div>
<div class="slide-item"><h3>22</h3></div>
<div class="slide-item"><h3>23</h3></div>
<div class="slide-item"><h3>24</h3></div>
<div class="slide-item"><h3>25</h3></div>
<div class="slide-item"><h3>26</h3></div>
<div class="slide-item"><h3>27</h3></div>
<div class="slide-item"><h3>28</h3></div>
</div>
</div>
<script>
$('#slick1').slick({
rows: 2,
dots: false,
arrows: true,
infinite: true,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6
});
</script>