그누 보드 질문은 아닙니다. 부탁드립니다. 채택완료
안녕하세요
그누보드 질문은 아니고 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 포인트
leejiro
10년 전
올리신 소스가 http://owlgraphic.com/owlcarousel/#demo 를 기반으로 만든 슬라이더 같은데요..
옵션을 한번 살펴보시면 도움이 되실듯..
사견으로는 두 줄 표시에 관한 메뉴는 없어보이는데.. 만약 제가 수정한다면 10개출력으로 itemcount를 수정하고 5번째 표시 후 br 태그를 넣어서 만들어 볼듯합니다. 물론 이를 위해서는 width도 수정해야 하고 슬라이더를 감싸는 div의 height도 늘여야하고.. 시간이 많이 걸릴듯합니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인