배너를 가로로 배열하고 싶습니다. 도와주세요
본문
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SKIN_URL.'/style.css">', 0);
add_javascript('<script src="'.G5_JS_URL.'/jquery.bxslider.js"></script>', 0);
?>
<?php
$max_width = $max_height = 0;
$bn_first_class = ' class="bn_first"';
$bn_slide_btn = '';
$bn_sl = ' class="bn_sl"';
$main_banners = array();
for ($i=0; $row=sql_fetch_array($result); $i++)
{
$main_banners[] = $row;
if ($i==0) echo '<div id="main_bn">'.PHP_EOL.'<ul class="slide-wrap">'.PHP_EOL;
//print_r2($row);
// 테두리 있는지
$bn_border = ($row['bn_border']) ? ' class="sbn_border"' : '';;
// 새창 띄우기인지
$bn_new_win = ($row['bn_new_win']) ? ' target="_blank"' : '';
$bimg = G5_DATA_PATH.'/banner/'.$row['bn_id'];
if (file_exists($bimg))
{
$banner = '';
$size = getimagesize($bimg);
if($size[2] < 1 || $size[2] > 16)
continue;
if($max_width < $size[0])
$max_width = $size[0];
if($max_height < $size[1])
$max_height = $size[1];
echo '<li'.$bn_first_class.'>'.PHP_EOL;
if ($row['bn_url'][0] == '#')
$banner .= '<a href="'.$row['bn_url'].'">';
else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
$banner .= '<a href="'.$row['bn_url'].'"'.$bn_new_win.'>';
}
echo $banner.'<img src="'.G5_DATA_URL.'/banner/'.$row['bn_id'].'" width="'.$size[0].'" alt="'.get_text($row['bn_alt']).'"'.$bn_border.'order by rand()>';
if($banner)
echo '</a>'.PHP_EOL;
echo '</li>'.PHP_EOL;
}
}
if ($i > 0) {
echo '</ul>'.PHP_EOL;
echo '<div id="bx_pager" class="bx_pager">
<ul>';
$k = 0;
foreach( $main_banners as $row ){
echo '<li> <a data-slide-index="'.$k.'" href="">'.get_text($row['bn_alt']).'</a></li>'.PHP_EOL;
$k++;
}
echo '</ul>
</div>'.PHP_EOL;
echo '</div>'.PHP_EOL;
?>
<?php
}
?>
현재 사용하고 있는 배너 출력에 관련된거같은 부분인데
여기서 어떤 부분을 수정해야 하는지 좀 알려주세요 ㅜㅜ
https://sir.kr/g5_plugin/7724?sfl=wr_subject%7C%7Cwr_content&stx=%EB%B0%B0%EB%84%88
여기 두곳 보고 설치했는데 배너를 등록하고 출력하면 세로로 만 출력됩니다.
만약 제가 총 10개의 배너가 있는데
한줄에 최대 5개를 출력하고 5개가 넘어가면 그 다음줄로 넘어가서 출력할 수 있게 하고 싶습니다.
배너를 출력할땐 <?php echo display_banner('메인', 'mainbanner.skin.php'); ?> 이렇게 출력하고 있는데
어떤 부분이 잘못된걸까요 ㅜㅜ
답변 1
* 헷깔리실것같아서 필요한 내용만 적었습니다 *
/* CSS 배너갤러리 */
<style>
.slide-wrap {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.slide-wrap li {
width: 20%;
box-sizing: border-box;
}
</style>
위 코드를
올리신 코드가 있는파일 최 하단에
?> 가 적힌 부분 밑에다가 넣으세요.
.slide-wrap li 에서
width 값을 20% 면 100%기준 5개
30% 면 3개 로 들어간다고 보시면 됩니다.
-----------------------------------
전에 올리신 글의 댓글들 보니
최신버전엔 가로갯수 설정하는게 기본으로 있는것같네요.
그런데 올리신 코드에선 없는것같아요.
제가 적어드린방법으로 CSS에서 수동으로 수정하시던지,
버전을 바꿔서 수정하시던지 선택하시면 될듯합니다.
설정해보겠습니다 감사합니다 !!
반응형으로 한줄에 5개 고정이 아닌 유동적으로 바뀌게하고싶으면
보통은 미디어쿼리를 쓰지만 간단하게 min-width 만 줘도 얼추 될겁니다.
.slide-wrap li {
width: 20%;
box-sizing: border-box;
}
이부분을
.slide-wrap li {
width: 20%;
min-width: 200px;
box-sizing: border-box;
}
이렇게 수정하시고
min-width:200px;
이 값을 원하시는 크기로 적절하게 수정하세요.
최소 크기값입니다.
width 가 20% 로 유동적으로 크기가 변할때
width 크기가 min-width 보다 작아질려고하면 min-width 값으로 고정하는 원리입니다.
그래서 li 들의 전체 가로사이즈가 ul 넓이보다 크면 끝에있는 li를 하나씩 내리게됩니다.