0
我在codepen.io中找到了这个滑块，我想将其插入到我的网站上以承载客户的推荐。但现在，我想改变幻灯片的效果......我怎样才能使它只向左/右滑动33％，而不是100％，因为它被编程为？有没有什么办法让这个滑块只滑动33％而不是100％
这里是笔：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'));
感谢，
汤姆
非常感谢！ :) –
只有一件事...尽管幻灯片＃4不可见，但当您滑动横条时，它在那里......有什么方法可以将它从那里拿出来吗？ –
@TomDavies抱歉，我没有看到那个水平滚动条。你指的是，你在哪里使用哪个浏览器？ –