그누 보드 질문은 아닙니다. 부탁드립니다. 채택완료

안녕하세요

그누보드 질문은 아니고 PHP관련 질문 입니다. 확인 좀 부탁드립니다.

아래소스는 쇼핑몰에 이미지 출력하는 부분입니다.

아래 처럼 하면 이미지가 한줄로  5개씩 표현이 됩니다.

 

이것을 두줄로 총 10개를 출력하고자 합니다.

 

어디를 어떻게 수정하면 되는지 확인 부탁드립니다.

 

감사합니다.

 

 

 

Copy
{@$program_set[cate_code] = $var_set[cate_code]; // 쇼핑몰 상품분류$program_set[main_code] = $var_set[main_code]; // 쇼핑몰 메인출력그룹$program_set[img_thumb_w] = $var_set[img_thumb_w]; // 썸네일 이미지 가로크기$program_set[img_thumb_h] = $var_set[img_thumb_h]; // 썸네일 이미지 세로크기$program_set[img_thumb_type] = $var_set[img_thumb_type]; // 썸네일 이미지 생성방식 (1:일반 이미지축소, 2: 위 사이즈보다 큰경우 잘라내기)$program_set[limit] = $var_set[limit]; // 출력수 (1~999)$program_set[order_type] = $var_set[order_type]; // 정렬 방식. 등록순(DEFAULT), 등록날짜순(REG_TIME), 조회수(VIEW), 랜덤(RAND)$shop_goods = program_load(SHOP_GOODS);@}{@$navColor = '#111'; // 방향 네비게이션 색상$dotColor = '#ddd'; // 하단 네비게이션 색상$dotOver = '#999'; // 하단 네비게이션 오버 색상$dotPosition = 'text-align:center;'; // 하단 네비게이션 위치 (top:0; bottom:0; text-align:center;)$slideWidth = ($var_set[slide_width]) ? 'max-width: '.$var_set[slide_width].'px;' : '';$zIndex = (!$var_set[animateOut]) ? 'z-index: 1;' : '';@}<load target="/img_up/shop_pds/comico/design/jquery.min.js"><load target="/img_up/shop_pds/comico/design/owl.carousel.min.css"><load target="/img_up/shop_pds/comico/design/owl.carousel.min.js"><style>@font-face { font-family: 'icomoon_slider'; src: url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.eot'); src: url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.eot?#iefix') format('embedded-opentype'),  url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.woff') format('woff'),  url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.ttf') format('truetype'),  url('/img_up/shop_pds/aramfarm/design/icomoon_slider/icomoon.svg#icomoon_slider') format('svg'); font-weight: normal; font-style: normal;}.best50 {{$slideWidth} margin:0 auto;}.best50 a {display:block; border:none; text-decoration:none;}.best50 .owl-item {{$zIndex}}.best50 .item {position:relative;}.best50 .owl-controls {-webkit-tap-highlight-color:transparent;}.best50 .owl-controls .owl-nav [class*='owl-'] { position:absolute; top:0; z-index:2; width:30px; height:30px; line-height:30px; margin-top:-45px; font-size:0; cursor:pointer; opacity:0.7;}.best50 .owl-controls .owl-nav [class*='owl-']:before{font-family:'icomoon_slider'; font-size:20px; font-weight:bold; color:{$navColor}; border:1px solid #b5b4b4; padding:5px;}.best50 .owl-controls .owl-nav [class*='owl-']:hover {opacity:1;}.best50 .owl-controls .owl-nav .owl-prev {right:35px;}.best50 .owl-controls .owl-nav .owl-next {right:0;}.best50 .owl-controls .owl-nav .owl-prev:before {content:'\e600';}.best50 .owl-controls .owl-nav .owl-next:before {content:'\e601';}.best50 .owl-controls .owl-nav .disabled {opacity:0.5; cursor:default;}.best50 .owl-dots {position:absolute; left:0; width:100%; height:30px; padding:10px; font-size:0; box-sizing:border-box; {$dotPosition}}.best50 .owl-dots .owl-dot {display:inline-block; zoom:1; *display:inline;}.best50 .owl-dots .owl-dot span { display:block;width:10px; height:10px; margin:0 4px; background:{$dotColor}; border-radius:30px; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease;}.best50 .owl-dots .owl-dot.active span,.best50 .owl-dots .owl-dot:hover span {background:{$dotOver};}</style> <div id="owl_{$this_group_code}" class="best50" cond="count($shop_goods)"> <!--@foreach($shop_goods as $k=>$v)--> <div class="item" data-hash="{$this_group_code}_item{$k}">  <a href="{$v[read_url]}">   <div class="figure">    <!--@if($v[img1_url])-->     <img src="{$v[img1_url]}" alt="{$v[goods_name]}">    <!--@else-->     <img src="http://placehold.it/{$var_set[img_thumb_w]}x{$var_set[img_thumb_h]}/eee/999" alt="no img">    <!--@end-->   <dl class="caption {$var_set[caption]}">    <dt>     <span class="goods_name">{$v[goods_name]}</span>    </dt>    <dd>     <!--@if($v[goods_stock])-->      <span class="sijung_price" cond="$v[sijung_price_str]">{$v[sijung_price_str]|number}원</span>      <span class="price">{$v[price_str]}원</span>     <!--@else-->      <span class="soldout">품절</span>     <!--@end-->     <span class="icon" cond="$v[icon_str] || $v[icon_str2]">{$v[icon_str]} {$v[icon_str2]}</span>    </dd>   </dl>   </div>  </a> </div> <!--@end--></div><script>jQuery(function($) { $('#owl_{$this_group_code}').owlCarousel({  margin: {$var_set[margin]},     // 이미지 간격  loop: true,         // 무한 반복  center: false,        // 액티브 슬라이드 가운데 정렬  mouseDrag: true,       // 마우스 드레그 사용  touchDrag: true,       // 터치 드레그 사용  stagePadding: 0,       // 스테이지 여백 (좌우 슬라이드 노출)  nav: {$var_set[nav]},      // 방향 네비게이션  dots: {$var_set[dots]},      // 하단 네비게이션  dotsEach: false,       // 하단 네비게이션 (페이지별 출력,항목별 출력)  autoplay: true,        // 자동 재생  autoplayTimeout: 5000,      // 자동 재생 속도  smartSpeed: 250,       // 슬라이드 속도  responsiveRefreshRate: 200,     // 반응형 체크 시간  startPosition: 0,       // 시작 슬라이드 번호  URLhashListener: false,      // #URL 로 액티브 슬라이드 동작  autoplayHoverPause: false,     // 마우스 오버시 일시정지  responsiveClass: false,      // 반응형 class명 사용 (owl-reponsive-0)  navContainer: false,      // 방향 네비게이션 커스터마이징  dotsContainer: false,      // 하단 네비게이션 커스터마이징  responsive: {        // 반응형   0: {    items:2,  // 한 화면 출력수 (모바일)    slideBy:10 // 한번에 슬라이드 되는 수 (모바일)   },   760: {    items:4,  // 한 화면 출력수 (태블릿)    slideBy:4 // 한번에 슬라이드 되는 수 (태블릿)   },   1024: {    items:5,   // 한 화면 출력수 (PC)    slideBy:50  // 한번에 슬라이드 되는 수 (PC)   }  } })});</script>
 

답변 1개

채택된 답변
+20 포인트

올리신 소스가 http://owlgraphic.com/owlcarousel/#demo 를 기반으로 만든 슬라이더 같은데요..

옵션을 한번 살펴보시면 도움이 되실듯.. 

 

사견으로는 두 줄 표시에 관한 메뉴는 없어보이는데.. 만약 제가 수정한다면 10개출력으로 itemcount를 수정하고 5번째 표시 후 br 태그를 넣어서 만들어 볼듯합니다. 물론 이를 위해서는 width도 수정해야 하고 슬라이더를 감싸는 div의 height도 늘여야하고.. 시간이 많이 걸릴듯합니다. 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고