I've made a custom PIXI.js slider for my wordpress website. It works pretty damn fine but i've got an issue : i'm trying to make the images that are loaded `background-size: cover` and centered. Right now on mobile, the images are stretched. But i can't find out how to do this ... Any help would be much much appreciated !Here is my js :
window.onload = function () {
class PIXIScene {
constructor(container) {
this.container = container;
if (!this.container) return;
this.init();
}
init() {
this.state();
this.setup();
this.animate();
}
state() {
this.isAnimating = false;
this.currentIndex = 0;
this.slides = [];
this.dom = {
next: document.querySelector('.slider__count .next'),
current: document.querySelector('.slider__count .current'),
firstSlide: document.querySelector('.slider__title-1'),
secondSlide: document.querySelector('.slider__title-2'),
fistSub: document.querySelector('.slider__subtitle-1'),
secondSub: document.querySelector('.slider__subtitle-2'),
// text1: document.querySelector('.')
};
this.firstSlideCount = 0;
this.secondSlideCount = 1;
this.firstSubCount = 0;
this.secondSubCount = 1;
}
setup() {
this.app = new PIXI.Application({
width: this.viewport.width,
height: this.viewport.height,
resolution: window.devicePixelRatio,
autoDensity: true,
autoResize: true,
transparent: true,
});
this.loadImages();
}
loadImages() {
//Getting the original images
this.originalImages = [...this.container.querySelectorAll('img')];
this.imageSrc = this.originalImages.map((image) => image.getAttribute('src'));
//Clearing the container & appending the canvas into it
this.container.innerHTML = '';
this.container.appendChild(this.app.view);
//Defining the loader
const loader = new PIXI.Loader();
//Adding the image src
this.images = [...this.imageSrc];
//Loading each image
this.images.forEach((image, i) => {
loader.add(image, this.images[i]);
});
loader.load((loader, resources) => {
this.resources = resources;
this.createSlider();
});
}
createSlider() {
//Container for all the images
this.slider = new PIXI.Container();
this.slider.width = this.app.screen.width;
this.slider.height = this.app.screen.height;
this.app.stage.addChild(this.slider);
//Defining the area for the filter
this.clipRect = new PIXI.Rectangle(0, 0, this.app.screen.width, this.app.screen.height);
this.slider.filterArea = this.clipRect;
this.app.stage.interactive = true;
this.addSlides();
this.createFilters();
this.slider.filters = [this.displacementFilter];
this.events();
}
addSlides() {
let i = 0;
Object.keys(this.resources).forEach((key) => {
const slide = new PIXI.Sprite(this.resources[key].texture);
//Setting initial slide position
slide.width = this.app.screen.width;
slide.height = this.app.screen.height;
slide.y = 0;
slide.x = i === 0 ? 0 : -this.app.screen.width;
//Adding all slides to the array in state
this.slides[i] = slide;
this.slider.addChild(slide);
i++;
});
}
createFilters() {
this.displacement = new PIXI.Sprite.from(
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2479807/displacementWave.jpg'
);
this.displacement.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacement, 0);
this.RGBFilter = new PIXI.filters.RGBSplitFilter([0, 0], [0, 0], [0, 0]);
return this.displacementFilter, this.RGBFilter;
}
nextSlide() {
if (this.nextButton.getAttribute('disabled') || this.isAnimating) return false;
this.prevButton.removeAttribute('disabled');
if (this.currentIndex + 2 >= this.images.length) {
this.nextButton.setAttribute('disabled', 'disabled');
}
const currentSlide = this.slides[this.currentIndex];
const nextSlide = this.slides[this.currentIndex + 1];
this.dom.next.textContent = '0' + (this.currentIndex + 2);
const tl = gsap.timeline({
onStart: () => {
this.isAnimating = true;
},
onComplete: () => {
this.currentIndex++;
this.isAnimating = false;
},
});
////////////////////////////////
// Change slider text contents
let nextSlideContent;
let currentSlideContent;
// Titre 1
if (this.currentIndex + 1 == this.firstSlideCount) {
nextSlideContent = this.dom.firstSlide;
} else if (this.currentIndex + 1 == this.secondSlideCount) {
nextSlideContent = this.dom.secondSlide;
}
if (this.currentIndex == this.firstSlideCount) {
currentSlideContent = this.dom.firstSlide;
} else if (this.currentIndex + 1 == this.secondSlideCount) {
currentSlideContent = this.dom.secondSlide;
}
// console.log(currentSlideContent);
// console.log(nextSlideContent);
tl.to(
currentSlide,
{
x: -this.app.screen.width,
duration: 1.5,
ease: 'Expo.easeInOut',
},
0
)
.fromTo(
nextSlide,
{
x: this.app.screen.width,
},
{
x: 0,
ease: 'Expo.easeInOut',
duration: 1.5,
},
0
)
.to(
this.displacementFilter.scale,
{
x: 40,
y: 40,
duration: 1,
},
0
)
.to(
this.displacementFilter.scale,
{
duration: 1,
x: 0,
y: 0,
},
0.5
)
.set(this.dom.current, {
opacity: 0,
y: 0,
})
.set(currentSlideContent, {
opacity: 0,
y: 0,
})
.set(
this.dom.next,
{
y: '-100%',
},
0
)
.set(
nextSlideContent,
{
opacity: 0,
y: '-100%',
},
0
)
.to(
this.dom.current,
{
opacity: 1,
y: '100%',
},
0
)
.to(
currentSlideContent,
{
opacity: 0,
y: '100%',
},
0
)
.to(
this.dom.next,
{
y: 0,
},
'-=1'
)
.to(
nextSlideContent,
{
opacity: 1,
y: 0,
},
'-=1'
);
return tl;
}
prevSlide() {
if (this.prevButton.getAttribute('disabled') || this.isAnimating) return false;
this.nextButton.removeAttribute('disabled');
if (this.currentIndex - 2 < 0) {
this.prevButton.setAttribute('disabled', 'disabled');
}
this.dom.next.textContent = '0' + this.currentIndex;
const tl = gsap.timeline({
onStart: () => {
this.isAnimating = true;
},
onComplete: () => {
this.currentIndex--;
this.isAnimating = false;
},
});
const currentSlide = this.slides[this.currentIndex];
const prevSlide = this.slides[this.currentIndex - 1];
////////////////////////////////
// Change slider text contents
let prevSlideContent;
let currentSlideContent;
// Titre 1
if (this.currentIndex - 1 == this.firstSlideCount) {
prevSlideContent = this.dom.firstSlide;
} else if (this.currentIndex - 1 == this.secondSlideCount) {
prevSlideContent = this.dom.secondSlide;
}
if (this.currentIndex == this.firstSlideCount) {
currentSlideContent = this.dom.firstSlide;
} else if (this.currentIndex == this.secondSlideCount) {
currentSlideContent = this.dom.secondSlide;
}
tl.to(
currentSlide,
{
x: this.app.screen.width,
duration: 1.5,
ease: 'Expo.easeInOut',
},
0
)
.fromTo(
prevSlide,
{
x: -this.app.screen.width,
},
{
x: 0,
ease: 'Expo.easeInOut',
duration: 1.5,
},
0
)
.to(
this.displacementFilter.scale,
{
x: 50,
y: 50,
duration: 1,
},
0
)
.to(
this.displacementFilter.scale,
{
duration: 1,
x: 0,
y: 0,
},
0.5
)
.set(this.dom.current, {
y: 0,
})
.set(currentSlideContent, {
opacity: 0,
y: 0,
})
.set(
this.dom.next,
{
y: '100%',
},
0
)
.set(
prevSlideContent,
{
opacity: 0,
y: '100%',
},
0
)
.to(
this.dom.current,
{
y: '-100%',
},
0
)
.to(
currentSlideContent,
{
opacity: 0,
y: '-100%',
},
0
)
.to(
this.dom.next,
{
y: 0,
},
'-=1'
)
.to(
prevSlideContent,
{
opacity: 1,
y: 0,
},
'-=1'
);
return tl;
}
events() {
this.nextButton = document.querySelector('.slider__next');
this.prevButton = document.querySelector('.slider__prev');
this.nextButton.addEventListener('click', this.nextSlide.bind(this));
this.prevButton.addEventListener('click', this.prevSlide.bind(this));
}
animate() {
requestAnimationFrame(() => {
this.animate();
});
this.app.render();
}
get viewport() {
const width = this.container.clientWidth;
const height = this.container.clientHeight;
return {
width,
height,
};
}
}
const slideshowCanvas = document.querySelector('.slider__canvas');
const scene = new PIXIScene(slideshowCanvas);
};