0
現在、1つの項目を表示してから垂直方向に移動するJS画像スライダがあります。これを変更して、一度に5つの項目を表示して横方向に移動したいのですが、JSまたはCSSを変更する必要があるかどうかはわかりません。JS画像のスライダ/カルーセルは1の代わりに5つの項目を表示する
各項目の幅を調整して表示させてみました。インラインブロックですが、違いはありません。
<div class="contentBoxContent" id="officers-slider">
<div class="prev">
<div class="arrow glyphicon glyphicon-chevron-left">
</div>
</div>
<div class="next">
<div class="arrow glyphicon glyphicon-chevron-right pull-right">
</div>
</div>
<ul class="officers-list">
<li>
<div class="officers-left">
<h3>name1</h3>
</div>
</li>
<li>
<div class="officers-left">
<h3>Name2</h3>
</div>
</li>
<li>
<div class="officers-left">
<h3>Name3</h3>
</div>
</li>
<li>
<div class="officers-left">
<h3>Name4</h3>
</div>
</li>
<li class="visibleOfficer">
<div class="officers-left">
<h3>Name5</h3>
</div>
</li>
<li>
<div class="officers-left">
<h3>Name6</h3>
</div>
</li>
<li>
<div class="officers-left">
<h3>Name7</h3>
</div>
</li>
<li>
</ul>
</div>
JS
(function($) {
$.fn.officersSlider = function(opts) {
// default configuration
var config = $.extend({}, {
autoplay:true,
delay: 6000,
speed: 1000,
slideHeight: 165,
activeClass: 'visibleOfficer',
easing: 'easeInOutQuad'
}, opts);
var visible = $(this).find('.' + config.activeClass);
var elementList = $(this).find('li');
var intrv ,intrv2;
function Init(e) {
var index = visible.index();
var visiblePos = config.slideHeight/2;
elementList.each(function(i) {
if(i < index)
$(this).css({
position: 'absolute',
top: visiblePos - config.slideHeight * (index - i)
});
else if(i === index) {
$(this).css({
position: 'absolute',
top: visiblePos
});
}
else if(i > index)
$(this).css({
position: 'absolute',
top: visiblePos + config.slideHeight * (i - index)
});
});
AutoPlay(e);
PauseHandler(e);
ButtonClick(e);
}
function ButtonClick(e) {
var next = e.find('.officers-next');
var prev = e.find('.officers-prev');
next.on('click', function() {
elementList.promise().done(function() {
elementList.clearQueue().finish();
SwitchNext(e);
});
});
prev.on('click', function() {
elementList.promise().done(function() {
elementList.clearQueue().finish();
SwitchPrev(e);
});
});
}
function PauseHandler(e) {
e.on({
'mouseenter' : function(){
StopAutoPlay();
},
'mouseleave' : function(){
intrv2 = setTimeout(function() { AutoPlay(e); }, config.delay);
}
});
}
function AutoPlay(e) {
SwitchNext(e);
intrv = setTimeout(function() { AutoPlay(e); }, config.delay);
}
function StopAutoPlay() {
clearTimeout(intrv);
clearTimeout(intrv2);
}
function SwitchNext(e) {
for(var i = 0; i < elementList.length; i++) {
var curr_pos = findPos(elementList[i])[1];
$(elementList[i]).clearQueue().finish().animate({ top: curr_pos - config.slideHeight },
{ duration: config.speed,
easing: config.easing
});
}
var firstObj = visible.parent().children('li').first();
var lastObjTop = visible.parent().children('li').last().css('top');
lastObjTop = parseFloat(lastObjTop.replace('px', ''));
var clonefirstObj = firstObj.clone().css({
'top': lastObjTop
});
visible.parent().append(clonefirstObj);
firstObj.remove();
setNextActive(visible);
elementList = e.find('li');
}
function SwitchPrev(e) {
for(var i = 0; i < elementList.length; i++) {
var curr_pos = findPos(elementList[i])[1];
$(elementList[i]).clearQueue().finish().animate({ top: curr_pos + config.slideHeight },
{ duration: config.speed,
easing: config.easing
});
}
var lastObj = visible.parent().children('li').last();
var firstObjTop = visible.parent().children('li').first().css('top');
firstObjTop = parseFloat(firstObjTop.replace('px', ''));
var clonelastObj = lastObj.clone().css({
'top': firstObjTop
});
visible.parent().prepend(clonelastObj);
lastObj.remove();
setPrevActive(visible);
elementList = e.find('li');
}
function findPos(obj) {
var curleft,
curtop;
curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj === obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}
function setNextActive(elem) {
elem.removeClass(config.activeClass);
var nextItem = elem.next();
nextItem.addClass(config.activeClass);
visible = nextItem;
}
function setPrevActive(elem) {
elem.removeClass(config.activeClass);
var prevItem = elem.prev();
prevItem.addClass(config.activeClass);
visible = prevItem;
}
// initialize every element
this.each(function() {
Init($(this));
});
return this;
};
$('#officers-slider').officersSlider({
delay: 3000
});
})(jQuery);
フィドルを作成して、編集してあなたに適したものにしてください! - https://jsfiddle.net/0r6z9s50/ – vohrahul
http://codepen.io/SaraTez/pen/yJwYyk私は試みましたが、このページに表示されているように機能していないようです。https://www.gkunions .co.uk/ – user3005003
あなたは少なくとも、動作するスライダーを与えてください。あなたの質問に記載されている1画像? codepenスニペットは機能しません。 – vohrahul