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

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

QA

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

본문

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>

 

 

이 질문에 댓글 쓰기 :

답변 1

style.css 에

.splide__arrow--prev {right: 0 !important;}

.splide__arrow--next {left: 0 !important;}

넣으세요

답변을 작성하시기 전에 로그인 해주세요.
전체 123,128 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT