javascript - 有没有办法让这个 slider 只滑动 33% 而不是 100%

Question

我在 codepen.io 中找到了这个 slider ，我想将它插入我的网站以托管客户的推荐。但是现在，我想改变滑动效果...我怎样才能让它只向左/向右滑动 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'));

谢谢，

汤姆

Answer 1

您可以调整大小并允许在 [id*='slider'] 上溢出以显示 2 个额外的图像。 position + left 可用于 .arrow-forward 箭头。

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'],['Slide 3', 'http://downloads.inspirationhut.net/wp-content/uploads/2014/08/preview-23.jpg'],
	['Slide 4', 'http://downloads.inspirationhut.net/wp-content/uploads/2014/08/preview-43.jpg']
], document.getElementById('container'));

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

ul {
  margin: 0;
  padding: 0;
}

#container {
  padding: 8px 0;
  overflow:hidden;
  margin:0 8px;
}

[id*='slider'] {
  width: 33.33%;
  min-height: 200px;
  background-color: salmon;
  box-sizing: border-box;
  position: relative;
}
[id*='slider'] .arrows {
  width: 100%;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
}
[id*='slider'] .arrows .arrow-backward {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
[id*='slider'] .arrows .arrow-backward:hover {
  background: rgba(0, 0, 0, 0.65);
}
[id*='slider'] .arrows .arrow-backward i {
  color: white;
  font-size: 30px;
  margin-left: 8px;
  margin-top: -1px;
}
[id*='slider'] .arrows .arrow-forward {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  position: relative;
  left: 200%;
}
[id*='slider'] .arrows .arrow-forward:hover {
  background: rgba(0, 0, 0, 0.65);
}
[id*='slider'] .arrows .arrow-forward i {
  color: white;
  font-size: 30px;
  margin-left: 11px;
  margin-top: -1px;
}
[id*='slider'] .slides {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
[id*='slider'] .slides .slides-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
[id*='slider'] .slides .slides-list .slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 100%;
  height: 100%;
  font-size: 2em;
  color: white;
  -webkit-transition: margin 200ms ease-in-out;
  transition: margin 200ms ease-in-out;
}

pre {
  margin: 0px 8px;
  padding: 1em !important;
  background: #f5f7f9;
  border: 0 !important;
  border-bottom: 1px solid #d8dee9 !important;
  border-left: 2px solid #69c !important;
  color: #666;
  white-space: pre-wrap;
}

#todo {
  margin-top: 10px;
}

#code-title {
  margin: 30px 8px 5px;
}

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="https://use.fontawesome.com/38906fe9fe.js"></script>
<div id="container"></div>

<pre id="todo">Todo: <br>- add animation for going back a slide<br>- don't allow arrows to function while slider is still sliding</pre>

<h3 id="code-title">Create a new slider</h3>
<pre class="prettyprint">var newSlider = new Slider([
	['Slide 1', 'background-image1.jpg'],
	['Slide 2', 'background-image1.jpg'],
	['Slide 3', 'background-image1.jpg'],
	['Slide 4', 'background-image1.jpg']
], document.getElementById('container'));</pre>

https://codepen.io/gc-nomade/pen/breEEZ