0
私はcodepen.ioでこのスライダを見つけました。私は、お客様の声をホストするために私のウェブサイトに挿入したかったのです。しかし、今、私はスライド効果を変更したい...私はそれがプログラムされているように100％ではなく、左右に33％だけスライドさせることができますか？ここでこのスライダを100％ではなく33％だけスライドさせる方法はありますか
はペンです：https://codepen.io/Roemerdt/pen/VjVpOa
function Slider(slides, container) {
this.slides = slides;
this.container = container || document.body;
this.currentSlide = 1;
this.uid = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();
this.initialize();
}
Slider.prototype.createElement = function sliderCreateElement(type, content, parent, id, classes) {
var parent = parent || document.body;
var classes = classes || [];
var element = document.createElement(type);
element.innerHTML = content;
if(id !== '') {
element.id = id;
}
for(var i = 0, n = classes.length; i < n; i++) {
element.classList.add(classes[i]);
}
parent.appendChild(element);
return element;
}
Slider.prototype.initialize = function sliderInitialize() {
var sliderElement = this.createElement('div', '', this.container, 'slider-' + this.uid);
var arrows = this.createElement('div', '', sliderElement, '', ['arrows']);
var arrowBackward = this.createElement('div', '', arrows, 'arrow-back-'+this.uid, ['arrow-backward']);
var arrowForward = this.createElement('div', '', arrows, 'arrow-front-'+this.uid, ['arrow-forward']);
this.createElement('i', '', arrowBackward, '', ['fa', 'fa-angle-left']);
this.createElement('i', '', arrowForward, '', ['fa', 'fa-angle-right']);
arrowBackward.addEventListener('click', this.slideBackward.bind(this), true);
arrowForward.addEventListener('click', this.slideForward.bind(this), true);
var slides = this.createElement('div', '', sliderElement, '', ['slides']);
var slidesList = this.createElement('ul', '', slides, 'slides-list-'+this.uid, ['slides-list']);
if(this.slides.length !== 0) {
for(var i = 0, n = this.slides.length; i < n; i++) {
var slide = this.createElement('li', '', slidesList, 'slide' + (i+1) + '-' + this.uid, ['slide']);
this.createElement('span', this.slides[i][0], slide, 'slide' + (i+1) + '-span-' + this.uid, ['slide-span']);
slide.style.background = 'salmon url(' + this.slides[i][1] + ')';
slide.style.backgroundSize = 'cover';
slide.style.backgroundPosition = 'center center';
}
} else {
this.createElement('li', 'Slide 1', slidesList, 'slide1-'+this.uid, ['slide']);
}
}
Slider.prototype.slideBackward = function SliderBackward() {
var slidesList = document.getElementById('slides-list-'+this.uid);
var currentFirstChild = slidesList.firstChild;
var lastSlideClone = slidesList.lastChild.cloneNode(true);
lastSlideClone.style.marginLeft = -(slidesList.offsetWidth) + 'px'; slidesList.insertBefore(lastSlideClone, slidesList.firstChild);
slidesList.firstChild.style.removeProperty('margin-left');
setTimeout(function(){ slidesList.removeChild(slidesList.lastChild) }, 200);
}
Slider.prototype.slideForward = function SliderForward() {
var slidesList = document.getElementById('slides-list-'+this.uid);
var firstSlideClone = slidesList.firstChild.cloneNode(true);
slidesList.appendChild(firstSlideClone);
slidesList.firstChild.style.marginLeft = slidesList.firstChild.style.marginLeft - slidesList.offsetWidth + 'px';
setTimeout(function(){ slidesList.removeChild(slidesList.firstChild) }, 200);
}
var newSlider = new Slider([
['Slide 1', 'http://downloads.inspirationhut.net/wp-content/uploads/2014/08/preview-23.jpg'],
['Slide 2', 'http://downloads.inspirationhut.net/wp-content/uploads/2014/08/preview-43.jpg']
], document.getElementById('container'));
おかげで、
トム
ありがとう！ :) –
もう1つだけ...スライド＃4は見えませんが、水平バーをスライドさせるとそこにあります。そこから取り出す方法はありますか？ –
@TomDavies申し訳ありませんが、私はその水平スクロールバーが表示されません。どのブラウザーを使用していますか？ –