我在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抱歉,我沒有看到那個水平滾動條。你指的是,你在哪裏使用哪個瀏覽器? –