http://tamjin-eco.com/index00.php

뉴스게시판을 슬라이드 최신글로 추출했는데 양옆 버튼을 좌우로 더 보내는 방법은 뭐가 있을까요?

css가 스킨 페이지에 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">로
연결이 되어 있어서
이걸 따로 저장해서 연결했떠니 슬라이드가 작동을 안해서 
css를 따로 손을 댈수 없네요.

스킨은 웹학교님의 
https://sir.kr/g5_skin/45054?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80를 적용해서 약간 수정했습니다!!

------------------------------------------------------------------------------------------

 

<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_LIB_PATH.'/thumbnail.lib.php');

$thumb_width = 250;

$thumb_height = 180;

$list_count = (is_array($list) && $list) ? count($list) : 0;

?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

<style>

</style>

<div id="splide2" class="splide" style="width: 100%; padding: 0 40px;">

  <div class="splide__track">

    <ul class="splide__list">

    <?php

    for ($i=0; $i<$list_count; $i++) {

    $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);

    if($thumb['src']) {

        $img = $thumb['src'];

    } else {

        $img = G5_IMG_URL.'/no_img.png';

        $thumb['alt'] = '이미지가 없습니다.';

    }

    $img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';

    $wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);

    ?>

        <li class="splide__slide" style="margin: 0 10px;">

            <a href="<?php echo $wr_href; ?>"><?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?></a>

        </li>

    <?php }  ?>

    <?php if ($list_count == 0) { //게시물이 없을 때  ?>

    <li>게시물이 없습니다.</li>

    <?php }  ?>

    </ul>

  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>

<script>

  document.addEventListener( 'DOMContentLoaded', function () {

  //  new Splide( '#splide' ).mount();

    new Splide( '#splide2', {

      'type'    : 'loop',

      'height'   : '10rem',

      'perPage' : 4,

      'perMove' : 1,

      'focus'   : 'center',

      'autoplay' : true,

      'pagination' : false,

    } ).mount();

  } );

</script>