Javascript 有没有办法让这个滑块只滑动33%而不是100%

我在codepen.io中找到了这个滑块，我想将它插入我的网站，以主持客户的推荐。但是现在，我想改变幻灯片效果。。。我怎样才能使它只向左/向右滑动33%，而不是编程设定的100%

这是钢笔：

谢谢

---

Tom

在css中，您只需执行滑块{width=33%；}而不是滑块{width=100%；}

您可以调整大小并允许[id*='slider']上的溢出来显示两个额外的图像。位置+左侧可用于.向前箭头

功能滑块，容器{ this.slides=幻灯片； this.container=container | | document.body； 此.currentSlide=1； this.uid=String.fromCharCode65+Math.floorMath.random*26+Date.now； 这是初始化； } Slider.prototype.createElement=函数sliderCreateElementtype、内容、父项、id、类{ var parent=parent | | document.body； 变量类=类| |[]； var元素=document.createElementtype； element.innerHTML=内容； ifid！=={ element.id=id； } forvar i=0，n=classes.length；i]，document.getElementById'container'；谢谢你的回答！但我要做的是改变幻灯片效果。。。类似于有三个对象的图像，当按下按钮时，只有一个对象被忽略，只有一件事。。。虽然幻灯片4不可见，但当您滑动水平条时，它就在那里。。。有没有办法把它拿出来？@TomDavies对不起，我没有看到那个水平滚动条。你指的是，在你看到它的地方，你使用哪种浏览器？Opera@GCyrillus@TomDavies：，在我的操作系统W7代码段或代码笔中不显示任何滚动条

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'));