최신글스킨 문의드립니다
본문
최신글스킨을 받아서 수정해보고있는데 막히는문제가 있네요 도움요청드립니다~
이미지처럼 만들고싶은데요 모양은 되어있지만 1번과2번은 같은 내용이 나옵니다 1번 2번이 다른게시물로 나오게 하려면 어느부분을 수정해야하는지 문의드립니다 ㅠㅠ
스킨 소스입니다
<div>
<ul class="pgwSlider">
<?php for ($i = 0; $i < count($list); $i++) { ?>
<li>
<a href="<?=$list[$i]['href']?>">
<?php
$n_thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $n_thumb_width, $n_thumb_height);
// 스넵이미지 생성하고 뷰어 시킨다.
$n_noimg = "$latest_skin_url/img/noimg.gif";
// 이미지가 없을경우의 이미지 위치
if($n_thumb['src']) {
$img_content = '<img src="'.$n_thumb['src'].'" alt="'.$list[$i][''].'">';
} else {
$img_content = '<img src="'.$n_noimg.'" width="'.$n_thumb_width.'" height="'.$n_thumb_height.'" alt="이미지없음" title="" />';
}
echo $img_content;
?>
</a>
</li>
<?php } ?>
</ul>
</div>
<script src="<?php echo $latest_skin_url?>/pgwslider.js"></script>
<script>
var pgwSlider = $('.pgwSlider').pgwSlider();
function reloadSlider() {
var newConfig = {};
var listPosition = $('input[name="listPosition"]:checked').val();
if (listPosition == 'none') { newConfig.displayList = false; } else { newConfig.listPosition = listPosition; }
newConfig.selectionMode = $('input[name="selectionMode"]:checked').val();
newConfig.transitionEffect = $('input[name="transitionEffect"]:checked').val();
if ($('#displayControls:checked').val() == 'true') {
newConfig.displayControls = true;
}
if ($('#verticalCentering:checked').val() == 'true') {
newConfig.verticalCentering = true;
}
if ($('#adaptiveHeight:checked').val() == 'true') {
newConfig.adaptiveHeight = true;
}
if ($('#maxHeight:checked').val() == 'true') {
newConfig.maxHeight = 300;
}
pgwSlider.reload(newConfig);
}
$('.sliderConfig input').bind('change', function() {
reloadSlider()
});
</script>
js파일도 있는데 여기도 수정해야하까요.
/**
* PgwSlider - Version 2.3
*
* Copyright 2014, Jonathan M. Piat
* http://pgwjs.com - http://pagawa.com
*
* Released under the GNU GPLv3 license - http://opensource.org/licenses/gpl-3.0
*/
;(function($){
$.fn.pgwSlider = function(options) {
var defaults = {
mainClassName : 'pgwSlider',
listPosition : 'right',
selectionMode : 'click',
transitionEffect : 'fading',
autoSlide : false,
displayList : true,
displayControls : false,
touchControls : true,
verticalCentering : false,
adaptiveHeight : false,
maxHeight : null,
beforeSlide : null,
afterSlide : null,
adaptiveDuration : 200,
transitionDuration : 500,
intervalDuration : 3000
};
if (this.length == 0) {
return this;
} else if(this.length > 1) {
this.each(function() {
$(this).pgwSlider(options);
});
return this;
}
var pgwSlider = this;
pgwSlider.plugin = this;
pgwSlider.data = [];
pgwSlider.config = {};
pgwSlider.currentSlide = 0;
pgwSlider.slideCount = 0;
pgwSlider.resizeEvent = null;
pgwSlider.intervalEvent = null;
pgwSlider.touchFirstPosition = null;
pgwSlider.transitionInProgress = false;
pgwSlider.window = $(window);
// Init
var init = function() {
// Merge user options with the default configuration
pgwSlider.config = $.extend({}, defaults, options);
// Setup
setup();
// Activate interval
if (pgwSlider.config.autoSlide) {
activateInterval();
}
return true;
};
// Get element
var getElement = function(obj) {
var element = {};
// Get link
var elementLink = obj.find('a').attr('href');
if ((typeof elementLink != 'undefined') && (elementLink != '')) {
element.link = elementLink;
var elementLinkTarget = obj.find('a').attr('target');
if ((typeof elementLinkTarget != 'undefined') && (elementLinkTarget != '')) {
element.linkTarget = elementLinkTarget;
}
}
// Get image
var elementThumbnail = obj.find('img').attr('src');
if ((typeof elementThumbnail != 'undefined') && (elementThumbnail != '')) {
element.thumbnail = elementThumbnail;
}
var elementImage = obj.find('img').attr('data-large-src');
if ((typeof elementImage != 'undefined') && (elementImage != '')) {
element.image = elementImage;
}
// Get title
var elementSpan = obj.find('span').text();
if ((typeof elementSpan != 'undefined') && (elementSpan != '') && (elementSpan != null)) {
element.title = elementSpan;
} else {
var elementTitle = obj.find('img').attr('alt');
if ((typeof elementTitle != 'undefined') && (elementTitle != '')) {
element.title = elementTitle;
}
}
// Get description
var elementDescription = obj.find('img').attr('data-description');
if ((typeof elementDescription != 'undefined') && (elementDescription != '')) {
element.description = elementDescription;
}
return element;
};
// Update the current height
var updateHeight = function(height, animate) {
// Check maxHeight
if (pgwSlider.config.maxHeight) {
if (pgwSlider.plugin.width() > 410 && height > pgwSlider.config.maxHeight) {
height = pgwSlider.config.maxHeight;
} else if (pgwSlider.plugin.width() <= 410) {
if (height + pgwSlider.plugin.find('.ps-list').height() > pgwSlider.config.maxHeight) {
height = pgwSlider.config.maxHeight - pgwSlider.plugin.find('.ps-list').height();
}
}
}
// Prevents multiple calculations in a short time
clearTimeout(pgwSlider.resizeEvent);
pgwSlider.resizeEvent = setTimeout(function() {
// Adjust right list
var elementHeight = ((height - ((pgwSlider.slideCount - 1) * 6)) / pgwSlider.slideCount);
var elementWidth = (100 / pgwSlider.slideCount);
pgwSlider.plugin.find('.ps-list > li').css({ width: elementWidth + '%' });
// Adjust main container
if (typeof animate != 'undefined' && animate && pgwSlider.config.maxHeight == null) {
if (typeof pgwSlider.plugin.find('.ps-current').animate == 'function') {
pgwSlider.plugin.find('.ps-current').animate({
height: height
}, pgwSlider.config.adaptiveDuration, function() {
pgwSlider.plugin.find('.ps-list > li').animate({ height: elementHeight }, pgwSlider.config.adaptiveDuration);
});
} else {
pgwSlider.plugin.find('.ps-current').css('height', height);
pgwSlider.plugin.find('.ps-list > li').css('height', elementHeight);
}
} else {
pgwSlider.plugin.find('.ps-current').css('height', height);
pgwSlider.plugin.find('.ps-list > li').css('height', elementHeight);
}
// Vertical alignement
if (pgwSlider.config.verticalCentering) {
// List elements
pgwSlider.plugin.find('.ps-list > li').each(function(){
if ((elementHeight > 50) && ($(this).find('img').height() > elementHeight)) {
var imageMargin = Math.round(($(this).find('img').height() - elementHeight) / 2);
$(this).find('img').css('margin-top', -imageMargin);
} else if ($(this).find('img').height() < elementHeight) {
var imageMargin = Math.round((elementHeight - $(this).find('img').height()) / 2);
$(this).find('img').css('margin-top', imageMargin);
} else {
$(this).find('img').css('margin-top', '');
}
});
// Current elements
pgwSlider.plugin.find('.ps-current > ul > li').each(function(){
var isVisible = ($(this).css('display') == 'none') ? false : true;
if (! isVisible) {
$(this).show();
}
if ($(this).show().find('img').height() > height) {
var imageMargin = Math.round(($(this).find('img').height() - height) / 2);
$(this).find('img').css('margin-top', -imageMargin);
} else if ($(this).show().find('img').height() < height) {
var imageMargin = Math.round((height - $(this).find('img').height()) / 2);
$(this).find('img').css('margin-top', imageMargin);
} else {
$(this).find('img').css('margin-top', '');
}
if (! isVisible) {
$(this).hide();
}
});
}
}, 100);
return true;
};
// Set size class
var setSizeClass = function() {
if (pgwSlider.plugin.width() <= 410) {
pgwSlider.plugin.addClass('narrow').removeClass('wide');
} else {
pgwSlider.plugin.addClass('wide').removeClass('narrow');
}
return true;
};
// Setup
var setup = function() {
// Create container
pgwSlider.plugin.removeClass(pgwSlider.config.mainClassName).addClass('ps-list');
pgwSlider.plugin.wrap('<div class="' + pgwSlider.config.mainClassName + '"></div>');
pgwSlider.plugin = pgwSlider.plugin.parent();
pgwSlider.plugin.prepend('<div class="ps-current"><ul></ul><span class="ps-caption"></span></div>');
pgwSlider.slideCount = pgwSlider.plugin.find('.ps-list > li').length;
if (pgwSlider.slideCount == 0) {
throw new Error('PgwSlider - No slider item has been found');
return false;
}
// Add controls
if (pgwSlider.config.displayControls && pgwSlider.slideCount > 1) {
pgwSlider.plugin.find('.ps-current').prepend('<span class="ps-prev"><span class="ps-prevIcon"></span></span>');
pgwSlider.plugin.find('.ps-current').append('<span class="ps-next"><span class="ps-nextIcon"></span></span>');
pgwSlider.plugin.find('.ps-current .ps-prev').click(function() {
pgwSlider.previousSlide();
});
pgwSlider.plugin.find('.ps-current .ps-next').click(function() {
pgwSlider.nextSlide();
});
}
// Disable list
if (! pgwSlider.config.displayList) {
pgwSlider.plugin.find('.ps-current').css('width', '100%');
pgwSlider.plugin.find('.ps-list').hide();
}
// Get slider elements
var elementId = 1;
pgwSlider.plugin.find('.ps-list > li').each(function() {
var element = getElement($(this));
element.id = elementId;
pgwSlider.data.push(element);
$(this).addClass('elt_' + element.id);
// Check element title
if (element.title) {
if ($(this).find('span').length == 1) {
if ($(this).find('span').text() == '') {
$(this).find('span').text(element.title);
}
} else {
$(this).find('img').after('<span>' + element.title + '</span>');
}
}
// Set element in the current list
var currentElement = $('<li class="elt_' + elementId + '"></li>');
if (element.image) {
currentElement.html('<img src="' + element.image + '" alt="' + (element.title ? element.title : '') + '">');
} else if (element.thumbnail) {
currentElement.html('<img src="' + element.thumbnail + '" alt="' + (element.title ? element.title : '') + '">');
}
if (element.link) {
currentElement.html('<a href="' + element.link + '"' + (element.linkTarget ? ' target="' + element.linkTarget + '"' : '') + '>' + currentElement.html() + '</a>');
}
pgwSlider.plugin.find('.ps-current > ul').append(currentElement);
// Set selection mode
if ((pgwSlider.config.selectionMode == 'mouseOver') && (pgwSlider.config.transitionEffect == 'fading')) {
$(this).css('cursor', 'default').click(function(event) {
event.preventDefault();
}).bind('mouseenter', function(event) {
displayElement(element.id);
});
$(this).find('a').css('cursor', 'default');
} else {
$(this).css('cursor', 'pointer').click(function(event) {
event.preventDefault();
displayElement(element.id);
});
}
elementId++;
});
// Set list position
if (pgwSlider.config.listPosition == 'left') {
pgwSlider.plugin.addClass('listOnTheLeft');
}
// Attach slide events
if (pgwSlider.config.autoSlide) {
pgwSlider.plugin.on('mouseenter', function() {
clearInterval(pgwSlider.intervalEvent);
pgwSlider.intervalEvent = null;
}).on('mouseleave', function() {
activateInterval();
});
}
// Display the first element
displayElement(1);
// Set the first height
pgwSlider.plugin.find('.ps-current > ul > li.elt_1 img').on('load', function() {
setSizeClass();
var maxHeight = pgwSlider.plugin.find('.ps-current > ul > li.elt_1 img').height();
updateHeight(maxHeight);
pgwSlider.window.resize(function() {
// The new class must be set before the recalculation of the height.
setSizeClass();
var maxHeight = pgwSlider.plugin.find('.ps-current > ul > li.elt_' + pgwSlider.currentSlide + ' img').height();
updateHeight(maxHeight, pgwSlider.config.adaptiveHeight);
});
});
// Touch controls for current image
if (pgwSlider.config.touchControls && pgwSlider.slideCount > 1) {
pgwSlider.plugin.find('.ps-current').on('touchstart', function(e) {
try {
if (e.originalEvent.touches[0].clientX && pgwSlider.touchFirstPosition == null) {
pgwSlider.touchFirstPosition = e.originalEvent.touches[0].clientX;
}
} catch(e) {
pgwSlider.touchFirstPosition = null;
}
});
pgwSlider.plugin.find('.ps-current').on('touchmove', function(e) {
try {
if (e.originalEvent.touches[0].clientX && pgwSlider.touchFirstPosition != null) {
if (e.originalEvent.touches[0].clientX > (pgwSlider.touchFirstPosition + 50)) {
pgwSlider.touchFirstPosition = null;
pgwSlider.previousSlide();
} else if (e.originalEvent.touches[0].clientX < (pgwSlider.touchFirstPosition - 50)) {
pgwSlider.touchFirstPosition = null;
pgwSlider.nextSlide();
}
}
} catch(e) {
pgwSlider.touchFirstPosition = null;
}
});
pgwSlider.plugin.find('.ps-current').on('touchend', function(e) {
pgwSlider.touchFirstPosition = null;
});
}
return true;
};
// Finish element
var finishElement = function(element) {
// Element caption
var elementText = '';
if (element.title) {
elementText += '<b>' + element.title + '</b>';
}
if (element.description) {
if (elementText != '') elementText += '<br>';
elementText += element.description;
}
if (elementText != '') {
if (element.link) {
elementText = '<a href="' + element.link + '"' + (element.linkTarget ? ' target="' + element.linkTarget + '"' : '') + '>' + elementText + '</a>';
}
if (typeof pgwSlider.plugin.find('.ps-caption').fadeIn == 'function') {
pgwSlider.plugin.find('.ps-caption').html(elementText);
pgwSlider.plugin.find('.ps-caption').fadeIn(pgwSlider.config.transitionDuration / 2);
} else {
pgwSlider.plugin.find('.ps-caption').html(elementText);
pgwSlider.plugin.find('.ps-caption').show();
}
}
// Slider controls
if (pgwSlider.config.displayControls) {
if (typeof pgwSlider.plugin.find('.ps-current > .ps-prev').fadeIn == 'function') {
pgwSlider.plugin.find('.ps-current > .ps-prev, .ps-current > .ps-next').fadeIn(pgwSlider.config.transitionDuration / 2);
} else {
pgwSlider.plugin.find('.ps-current > .ps-prev, .ps-current > .ps-next').show();
}
}
// After slide
if (typeof pgwSlider.config.afterSlide == 'function') {
pgwSlider.config.afterSlide(element.id);
}
// Set the container height
if (pgwSlider.config.adaptiveHeight) {
var maxHeight = pgwSlider.plugin.find('.ps-current .elt_' + element.id + ' img').height();
updateHeight(maxHeight, true);
}
return true;
}
// Fade an element
var fadeElement = function(element) {
var elementContainer = pgwSlider.plugin.find('.ps-current > ul');
// Update list items
pgwSlider.plugin.find('.ps-list > li').css('opacity', '0.6');
pgwSlider.plugin.find('.ps-list > li.elt_' + element.id).css('opacity', '1');
elementContainer.find('li').not('.elt_' + pgwSlider.currentSlide).not('.elt_' + element.id).each(function(){
if (typeof $(this).stop == 'function') {
$(this).stop();
}
$(this).css('position', '').css('z-index', 1).hide();
});
// Current element
if (pgwSlider.currentSlide > 0) {
var currentElement = elementContainer.find('.elt_' + pgwSlider.currentSlide);
if (typeof currentElement.animate != 'function') {
currentElement.animate = function(css, duration, callback) {
currentElement.css(css);
if (callback) {
callback();
}
};
}
if (typeof currentElement.stop == 'function') {
currentElement.stop();
}
currentElement.css('position', 'absolute').animate({
opacity : 0,
}, pgwSlider.config.transitionDuration, function() {
currentElement.css('position', '').css('z-index', 1).hide();
});
}
// Update current id
pgwSlider.currentSlide = element.id;
// Next element
var nextElement = elementContainer.find('.elt_' + element.id);
if (typeof nextElement.animate != 'function') {
nextElement.animate = function(css, duration, callback) {
nextElement.css(css);
if (callback) {
callback();
}
};
}
if (typeof nextElement.stop == 'function') {
nextElement.stop();
}
nextElement.css('position', 'absolute').show().animate({
opacity : 1,
}, pgwSlider.config.transitionDuration, function() {
nextElement.css('position', '').css('z-index', 2).show();
finishElement(element);
});
return true;
}
// Slide an element
var slideElement = function(element, direction) {
var elementContainer = pgwSlider.plugin.find('.ps-current > ul');
if (typeof direction == 'undefined') {
direction = 'left';
}
if (pgwSlider.currentSlide == 0) {
elementContainer.find('.elt_1').css({
position : '',
left : '',
opacity : 1,
'z-index' : 2
}).show();
pgwSlider.plugin.find('.ps-list > li.elt_1').css('opacity', '1');
finishElement(element);
} else {
if (pgwSlider.transitionInProgress) {
return false;
}
pgwSlider.transitionInProgress = true;
// Get direction details
var elementWidth = elementContainer.width();
if (direction == 'left') {
var elementDest = -elementWidth;
var nextOrigin = elementWidth;
} else {
var elementDest = elementWidth;
var nextOrigin = -elementWidth;
}
var currentElement = elementContainer.find('.elt_' + pgwSlider.currentSlide);
if (typeof currentElement.animate != 'function') {
currentElement.animate = function(css, duration, callback) {
currentElement.css(css);
if (callback) {
callback();
}
};
}
currentElement.css('position', 'absolute').animate({
left : elementDest,
}, pgwSlider.config.transitionDuration, function() {
currentElement.css('position', '').css('z-index', 1).css('left', '').css('opacity', 0).hide();
});
// Next element
var nextElement = elementContainer.find('.elt_' + element.id);
if (typeof nextElement.animate != 'function') {
nextElement.animate = function(css, duration, callback) {
nextElement.css(css);
if (callback) {
callback();
}
};
}
nextElement.css('position', 'absolute').css('left', nextOrigin).css('opacity', 1).show().animate({
left : 0,
}, pgwSlider.config.transitionDuration, function() {
nextElement.css('position', '').css('left', '').css('z-index', 2).show();
pgwSlider.transitionInProgress = false;
// Display new element
pgwSlider.plugin.find('.ps-list > li').css('opacity', '0.6');
pgwSlider.plugin.find('.ps-list > li.elt_' + element.id).css('opacity', '1');
finishElement(element);
});
}
// Update current id
pgwSlider.currentSlide = element.id;
return true;
}
// Display the current element
var displayElement = function(elementId, apiController, direction) {
if (elementId == pgwSlider.currentSlide) {
return false;
}
var element = pgwSlider.data[elementId - 1];
if (typeof element == 'undefined') {
throw new Error('PgwSlider - The element ' + elementId + ' is undefined');
return false;
}
if (typeof direction == 'undefined') {
direction = 'left';
}
// Before slide
if (typeof pgwSlider.config.beforeSlide == 'function') {
pgwSlider.config.beforeSlide(elementId);
}
if (typeof pgwSlider.plugin.find('.ps-caption').fadeOut == 'function') {
pgwSlider.plugin.find('.ps-caption, .ps-prev, .ps-next').fadeOut(pgwSlider.config.transitionDuration / 2);
} else {
pgwSlider.plugin.find('.ps-caption, .ps-prev, .ps-next').hide();
}
// Choose the transition effect
if (pgwSlider.config.transitionEffect == 'sliding') {
slideElement(element, direction);
} else {
fadeElement(element);
}
// Reset interval to avoid a half interval after an API control
if (typeof apiController != 'undefined' && pgwSlider.config.autoSlide) {
activateInterval();
}
return true;
};
// Activate interval
var activateInterval = function() {
clearInterval(pgwSlider.intervalEvent);
if (pgwSlider.slideCount > 1 && pgwSlider.config.autoSlide) {
pgwSlider.intervalEvent = setInterval(function() {
if (pgwSlider.currentSlide + 1 <= pgwSlider.slideCount) {
var nextItem = pgwSlider.currentSlide + 1;
} else {
var nextItem = 1;
}
displayElement(nextItem);
}, pgwSlider.config.intervalDuration);
}
return true;
};
// Start auto slide
pgwSlider.startSlide = function() {
pgwSlider.config.autoSlide = true;
activateInterval();
return true;
};
// Stop auto slide
pgwSlider.stopSlide = function() {
pgwSlider.config.autoSlide = false;
clearInterval(pgwSlider.intervalEvent);
return true;
};
// Get current slide
pgwSlider.getCurrentSlide = function() {
return pgwSlider.currentSlide;
};
// Get slide count
pgwSlider.getSlideCount = function() {
return pgwSlider.slideCount;
};
// Display slide
pgwSlider.displaySlide = function(itemId) {
displayElement(itemId, true);
return true;
};
// Next slide
pgwSlider.nextSlide = function() {
if (pgwSlider.currentSlide + 1 <= pgwSlider.slideCount) {
var nextItem = pgwSlider.currentSlide + 1;
} else {
var nextItem = 1;
}
displayElement(nextItem, true, 'left');
return true;
};
// Previous slide
pgwSlider.previousSlide = function() {
if (pgwSlider.currentSlide - 1 >= 1) {
var previousItem = pgwSlider.currentSlide - 1;
} else {
var previousItem = pgwSlider.slideCount;
}
displayElement(previousItem, true, 'right');
return true;
};
// Destroy slider
pgwSlider.destroy = function(soft) {
clearInterval(pgwSlider.intervalEvent);
if (typeof soft != 'undefined') {
pgwSlider.plugin.find('.ps-list > li').each(function() {
$(this).attr('style', null).removeClass().css('cursor', '').unbind('click').unbind('mouseenter');
$(this).find('a').css('cursor', '');
$(this).find('img').attr('style', null);
});
pgwSlider.plugin.find('.ps-list').addClass(pgwSlider.config.mainClassName).removeClass('ps-list');
pgwSlider.plugin.find('.ps-current').unwrap().remove();
pgwSlider.hide();
} else {
pgwSlider.parent().remove();
}
pgwSlider.plugin = null;
pgwSlider.data = [];
pgwSlider.config = {};
pgwSlider.currentSlide = 0;
pgwSlider.slideCount = 0;
pgwSlider.resizeEvent = null;
pgwSlider.intervalEvent = null;
pgwSlider.touchFirstPosition = null;
pgwSlider.transitionInProgress = false;
pgwSlider.window = null;
return true;
};
// Reload slider
pgwSlider.reload = function(newOptions) {
pgwSlider.destroy(true);
pgwSlider = this;
pgwSlider.plugin = this;
pgwSlider.window = $(window);
pgwSlider.plugin.show();
// Merge new options with the default configuration
pgwSlider.config = $.extend({}, defaults, newOptions);
// Setup
setup();
// Activate interval
if (pgwSlider.config.autoSlide) {
activateInterval();
}
return true;
};
// Slider initialization
init();
return this;
}
})(window.Zepto || window.jQuery);
답변 2
다음과 같이 해볼수 있을것 같습니다.
먼저, 슬라이더의 각 슬라이드에 고유한 식별자를 부여해야 함. 이것을 위해 슬라이드의 데이터 소스를 변경하고 각 슬라이드에 고유한 ID를 할당. $list 배열에서 데이터를 가져와 각 슬라이드에 ID를 할당
<div>
<ul class="pgwSlider">
<?php for ($i = 0; $i < count($list); $i++) { ?>
<li data-slide-id="<?= $i + 1 ?>">
<a href="<?= $list[$i]['href'] ?>">
<!-- 이미지 및 내용 출력 코드 -->
</a>
</li>
<?php } ?>
</ul>
</div>
슬라이더 스크립트 부분에서 각 슬라이드의 ID를 사용하여 슬라이드를 관리하도록 수정 슬라이드를 표시할 때 displayElement 함수에 슬라이드의 ID를 전달하여 해당 슬라이드를 표시하도록 함.
// 슬라이드 관련 함수를 수정하여 슬라이드 ID를 이용하여 슬라이드를 선택합니다.
// ...
displayElement: function(elementId, apiController, direction) {
var elementContainer = pgwSlider.plugin.find('.ps-current > ul');
if (elementId == pgwSlider.currentSlide) {
return false;
}
var element = pgwSlider.plugin.find('.ps-list > li[data-slide-id="' + elementId + '"]');
if (typeof direction == 'undefined') {
direction = 'left';
}
// 이하 슬라이드 관련 코드를 그대로 사용합니다.
// ...
},
// ...
참고하셔서 원하시는 형태로 구현하시면 될 것 같습니다.
js 코드는 솔직히 너무길어 못읽겠꼬
게시판인거같으니까
1번째방법은 게시글등록할때 여분필드에나 구분자 하나추가한다 ex) big, small
출력할때 big 으로 된것만 왼쪽, 나머지 오른족 출력
다른방법은 지금상태에서 php 코드 % 연산자사용해서 0,4,8--- 이번호들만 big이미지
나머지는 작은이미지 이렇게 맞춘다 정도가있겠네요