I'm trying to convert the product-page tabs to an accordion on my Woocommerce store, but things won't work. When i click on my links, the dropdown doesn't show, it doesn't do nothing ... The height should animate as well as my "+" icon, but nothing happens. It looks like it doens't wnat to add the "is-open" class on the clicked element. So i think my error lies in my js, but i don't see where!
Here's my tabs.php file :
<?php
/**
* Single Product tabs
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce\Templates
* #version 3.8.0
*/
if (!defined('ABSPATH')) {
exit;
}
/**
* Filter tabs and allow third parties to add their own.
*
* Each tab is an array containing title, callback and priority.
*
* #see woocommerce_default_product_tabs()
*/
$product_tabs = apply_filters('woocommerce_product_tabs', array());
if (!empty($product_tabs)) : ?>
<div class="c-accordion">
<div class="c-accordion__wrapper">
<div class="c-accordion__content-wrapper">
<?php foreach ($product_tabs as $key => $product_tab) : ?>
<div class="c-accordion__content js-accordion">
<div class="c-accordion__content-title">
<span class="c-accordion__plus"></span>
<p class="u-a1">
<?php echo wp_kses_post(apply_filters('woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key)); ?>
</p>
</div>
<div class="c-accordion__content-main js-content">
<?php
if (isset($product_tab['callback'])) {
call_user_func($product_tab['callback'], $key, $product_tab);
}
?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
Here's my js :
// Custom Tabs
('use strict');
var Accordion = /** #class */ (function () {
function Accordion() {
this.items = document.querySelectorAll('.js-accordion');
this.itemClass = '.js-accordion';
this.contentWrapperClass = '.js-content';
this.css = {
open: 'is-open',
};
if (this.items.length > 0) {
this.init();
}
}
Accordion.prototype.init = function () {
var _this = this;
for (var i = 0; i < this.items.length; i++) {
this.items[i].addEventListener('click', function (ev) {
ev.preventDefault();
var current = ev.currentTarget;
var contentWrapper = current.querySelector(_this.contentWrapperClass);
if (!current.classList.contains(_this.css['open'])) {
_this.slideDown(current, contentWrapper);
return;
}
_this.closeItem();
});
}
};
Accordion.prototype.getActiveElement = function () {
var accordionItems = document.querySelectorAll('' + this.itemClass);
var active = null;
for (var i = 0; i < accordionItems.length; i++) {
if (accordionItems[i].classList.contains(this.css['open'])) {
active = accordionItems[i];
}
}
return active;
};
Accordion.prototype.slideDown = function (element, content) {
var _this = this;
var contentHeight = 0;
var active = this.getActiveElement();
for (var i = 0; i < this.items.length; i++) {
this.items[i].classList.remove(this.css['open']);
}
element.classList.add(this.css['open']);
if (active) {
var activeContent = active.querySelector(this.contentWrapperClass);
TweenMax.to(activeContent, 0.6, {
height: 0,
onStart: function () {
_this.openItem(content, contentHeight);
},
});
return;
}
// else
this.openItem(content, contentHeight);
};
Accordion.prototype.openItem = function (content, contentHeight) {
TweenMax.set(content, {
height: 'auto',
onComplete: function () {
contentHeight = content.clientHeight;
TweenMax.set(content, {
height: 0,
onComplete: function () {
TweenMax.to(content, 0.4, {
height: contentHeight,
onComplete: function () {
TweenMax.set(content, {
height: 'auto',
});
},
});
},
});
},
});
};
Accordion.prototype.closeItem = function () {
var active = this.getActiveElement();
if (active) {
var activeContent = active.querySelector(this.contentWrapperClass);
active.classList.remove(this.css['open']);
TweenMax.to(activeContent, 0.6, {
height: 0,
});
}
};
return Accordion;
})();
new Accordion();
and here's my css (scss) :
.c-accordion {
max-width: 100%;
width: 100%;
font-family: helvetica;
&__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: auto;
}
&__content-wrapper {
flex: 1 0 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
&__content-title {
position: relative;
transition: 0.3s;
padding-top: 10px;
padding-bottom: 10px;
padding-left: percentage(1/15);
}
&__content-main {
height: 0;
overflow: hidden;
padding-left: percentage(1/15);
display: flex;
flex-wrap: wrap;
p {
max-width: 300px;
}
}
&__content {
position: relative;
overflow: hidden;
cursor: pointer;
flex: 1 0 auto;
&:first-of-type {
&:before {
display: none;
}
}
&:before {
content: '';
width: 100%;
border-top: 2px solid $black;
position: absolute;
left: 0;
top: 0;
}
&:last-child {
&:after {
content: '';
width: 100%;
border-top: 2px solid $black;
position: absolute;
left: 0;
bottom: 0;
}
}
&__text {
padding-top: 10px;
padding-bottom: 20px;
line-height: 1.38;
}
&:hover {}
&.is-open {
transition: 0.3s;
.c-accordion {
&__plus {
transform: translateY(-50%) rotate(90deg);
&:after {
opacity: 0;
}
}
&__content-main {
height: auto;
}
}
}
}
&__plus {
width: 3vh;
height: 3vh;
position: absolute;
left: 0px;
top: 50%;
cursor: pointer;
opacity: 1;
transform: translateY(-50%) rotate(0deg);
transition: 0.4s;
&:before {
content: '';
height: 100%;
border-left: 2px solid $black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
&:after {
content: '';
width: 100%;
border-top: 2px solid $black;
position: absolute;
opacity: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s;
}
}
&__left {
padding-top: 10px;
padding-bottom: 75px;
width: percentage(6/14);
padding-right: 10px;
}
&__right {
padding-top: 10px;
padding-bottom: 75px;
width: percentage(8/14);
padding-right: 10px;
}
}
Does someone have any idea what i'm doing wrong ?
Thanks a lot !
Fixed, the error wasn't with this JS but there was a conflict with another plugin. Solved
Related
I am trying to make connect4 HTML game and I know I will be better off using canvas elements instead of a grids of divs but is it possible to make transition translate type of css animation when moving HTML elements around like this (using appendChild)
const row1 = document.getElementById("row1")
const row2 = document.getElementById("row2")
const ball = document.getElementById("TheBall")
ball.addEventListener("click", (event, element) => {
let rowNum = parseInt(ball.dataset.row)
if(rowNum==1) {
row2.appendChild(ball)
ball.dataset.row = 2
} else {
row1.appendChild(ball)
ball.dataset.row = 1
}
})
#main {
left:100px;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
}
#main div {
margin: 50px 0;
width: 50px;
height: 50px;
}
#TheBall {
width: auto;
height: auto;
background-color: red;
border-radius: 100%;
}
<div id="main">
<div id="row1"> </div>
<div id="row2">
<div id="TheBall" data-row=2></div>
</div>
</div>
Click on the red dot to toggle position of ball
You can use animationend to check when the animation end and move the ball element between the divs
const row1 = document.getElementById("row1")
const row2 = document.getElementById("row2")
const ball = document.getElementById("TheBall")
ball.addEventListener('animationend', () => {
ball.classList.remove("animate-ball");
ball.style.animation = "";
let rowNum = parseInt(ball.dataset.row)
if (rowNum == 1) {
row2.appendChild(ball)
ball.dataset.row = 2
} else {
row1.appendChild(ball)
ball.dataset.row = 1
}
});
ball.addEventListener("click", (event, element) => {
let rowNum = parseInt(ball.dataset.row)
if (rowNum == 1) {
ball.style.animation = "MoveDown 1s linear";
} else {
ball.style.animation = "MoveUp 1s linear";
}
ball.classList.add("animate-ball");
})
#main {
left: 100px;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
}
#main div {
margin: 50px 0;
width: 50px;
height: 50px;
}
#TheBall {
position: relative;
width: auto;
height: auto;
background-color: red;
border-radius: 100%;
}
.animate-ball {
animation-iteration-count: 1;
position: absolute;
bottom: 0;
}
#keyframes MoveUp {
0% {
top: -50px;
}
100% {
top: -100px;
}
}
#keyframes MoveDown {
0% {
top: 0;
}
100% {
top: 50px;
}
}
<div id="main">
<div id="row1"> </div>
<div id="row2">
<div id="TheBall" data-row=2></div>
</div>
</div>
Goal: To implement into my exit intent popup code a php cookie for 1 day.
I have found a working way for the popup, and a possible solution for the php cookie. I am very new in php though and having a hard time to piece everything together. I don't use dependencies like jQuery but embrace some lines of javascript.
Is the below the right way for the cookie?
Is there a way for a SLIMMER code (js, css, php) with the same result?
const show = () => {
const element = document.querySelector("#exit-intent");
if (element) {
element.style.visibility = "visible";
element.style.opacity = "1";
//element.style.transform = "scale(1)";
//element.style.transition = "0.01s, opacity 0.01s";
}
};
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("mouseout", (event) => {
if (!event.toElement && !event.relatedTarget) {
setTimeout(() => {
show();
}, 20);
}
});
});
.exit-intent {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background-color: rgba(255, 255, 255, .8);
-webkit-backdrop-filter: saturate(300%) blur(7px);
backdrop-filter: saturate(300%) blur(7px);
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.exit-intent:target {
visibility: visible;
opacity: 1;
}
.exit-intent-close {
position: absolute;
max-width: 500px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
}
.exit-intent .close {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
color: #000;
line-height: 0.6em;
}
.exit-intent .close:hover {
color: #999;
}
.close-exit-intent {
background: rgba(0, 0, 0, 0.7);
cursor: default;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
}
.exit-intent:target+.close-exit-intent {
opacity: 1;
visibility: visible;
}
<?php
$cookie_name = "TSBCookie";
$cookie_value = "TSB";
setcookie($cookie_name, $cookie_value, time() + (86400 * 1), "/"); // 86400 = 1 day
if(!isset($_COOKIE[$cookie_name])) {
echo "
<div id='exit-intent' class='exit-intent'>
<a href='/' class='close'>×</a>
<h2>Pop</h2>
</div>
<a href='/' class='close-exit-intent'></a>
";} else {
echo "";
}?>
The answer is already posted in the snippet. Thanks to the #CBroe.
I'm trying to implement a way to display / hide a div element with vanilla JavaScript triggered by a click event. The hide function works well but I seem to be missing something important when it comes to displaying the div's again. I've verified that the toggler function is working.
Simple sandbox here:
https://codepen.io/pen/eYmOzVe
(function() {
"use strict";
// HTML References
var flags = document.querySelector(".flags");
// Toogle
var toogle = true;
// Flag object
var flagObject = {
init: function(part1, part2, part3, part4, part5) {
this.part1 = part1;
this.part2 = part2;
this.part3 = part3;
this.part4 = part4;
this.part5 = part5;
},
draw: function() {
flags.innerHTML += `
<div id="${this.part1}">
<div class="${this.part2}">
<div class="${this.part3}"></div>
<div class="${this.part4}"></div>
<div class="${this.part5}"></div>
</div>
</div>
`;
},
toogler: function(arg) {
toogle ? flagObject.remove(arg) : flagObject.show(arg);
toogle = !toogle;
},
remove: function(arg) {
if (arg == "1") {
flag1Element.style.visibility = "hidden";
}
if (arg == "2") {
flag2Element.style.visibility = "hidden";
}
},
show: function(arg) {
if (arg == "1") {
flag1Element.style.visibility = "visible";
}
if (arg == "2") {
flag2Element.style.visibility = "visible";
}
}
};
// Create instances of the object
var swedishFlag = Object.create(flagObject);
var japaneseFlag = Object.create(flagObject);
// Init
swedishFlag.init(
"flag1",
"flag-sweden",
"cross-one-sweden",
"cross-two-sweden"
);
japaneseFlag.init("flag2", "flag-japan", "circle-japan");
// Array containing all flags
var allObjects = [swedishFlag, japaneseFlag];
// Draws flags
for (let i = 0; i < allObjects.length; i++) {
allObjects[i].draw();
}
// HTML element refrences
var flag1Element = document.querySelector("#flag1");
var flag2Element = document.querySelector("#flag2");
// Add eventlisteners to remove flags on click
flag1Element.addEventListener("click", function() {
flagObject.toogler(1);
});
flag2Element.addEventListener("click", function() {
flagObject.toogler(2);
});
})();
h1 {
text-align: center;
}
h3 {
color: green;
}
.content {
border: 1px solid black;
background-color: #eee;
padding: 2em;
margin: 0 auto;
height: 1000px;
width: 800px;
border-radius: 30px;
text-align: center;
}
.flags {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 1000px;
}
.flag-sweden {
position: relative;
background-color: #006aa7;
height: 200px;
width: 320px;
margin-bottom: 2em;
}
.cross-one-sweden {
background-color: #fecc00;
position: absolute;
width: 40px;
height: 200px;
top: 0;
left: 100px;
}
.cross-two-sweden {
background-color: #fecc00;
position: absolute;
width: 320px;
height: 40px;
top: 80px;
left: 0;
}
.flag-japan {
position: relative;
height: 200px;
width: 320px;
background-color: white;
margin-bottom: 2em;
}
.circle-japan {
background-color: #bd0029;
height: 125px;
width: 125px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -62.5px 0 0 -62.5px;
}
<h1>Sandbox</h1>
<div id="content" class="content">
<div class="flags"></div>
</div>
As Pavlin Petkov said in the comments, the image is not clickable when you hide it, so you can't toggle it back on. A simple solution to this that achieves the same result is to change the opacity instead of the visibility:
remove: function(arg) {
if (arg == "1") {
flag1Element.style.opacity = 0;
}
if (arg == "2") {
flag2Element.style.opacity = 0;
}
},
show: function(arg) {
if (arg == "1") {
flag1Element.style.opacity = 1;
}
if (arg == "2") {
flag2Element.style.opacity = 1;
}
}
This will display/hide a div with a click effect, and it will continue to occupy space on the page, as in your codepen. If you need to use visibility for some reason, I'd recommend a container div beneath the now hidden div which can trigger the show function; however, for the question at hand, this is sufficient.
I have created the following simple image comparison slider - modified from the version on w3schools (I know my mistake to use their code).
This all works fine on a desktop but when I try to use it on a mobile, nothing happens - it doesn't even register the console.log on the mousedown/touchstart (when I press on the slider button with my finger).
I was wondering if anyone could spot anything obvious with why it isn't working on mobile devices
(() => {
$.fn.imageComparisonSlider = function() {
var returnValue = this.each((index, item) => {
var $container = $(this);
var $overlay = $container.find('.image-comparison-slider__bottom-image');
var $slider = $('<span class="image-comparison-slider__slider"></span>');
var $window = $(window);
var touchStarted = false;
var width = $container.outerWidth();
$container.prepend($slider);
$container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
event.preventDefault();
console.log('touchstart');
touchStarted = true;
});
$window.on("mousemove touchmove", windowEvent => {
if (touchStarted) {
// get the cursor's x position:
let pos = getCursorPos(windowEvent);
// prevent the slider from being positioned outside the image:
if (pos < 0) pos = 0;
if (pos > width) pos = width;
// execute a function that will resize the overlay image according to the cursor:
slide(pos);
}
});
$window.on('mouseup touchend', event => {
event.preventDefault();
touchStarted = false;
});
function getCursorPos(e) {
var thisEvent = e || window.event;
// calculate the cursor's x coordinate, relative to the image
return thisEvent.pageX - $container.offset().left;
}
function slide(x) {
// set the width of the overlay
$overlay.width(width - x);
// position the slider
$slider[0].style.left = x + 'px';
}
function resetSlider() {
$overlay.width('50%');
$slider[0].style.left = $overlay.width() + 'px'
width = $container.outerWidth();
}
});
return returnValue;
};
})($);
$('.image-comparison-slider__container').imageComparisonSlider();
.image {
display: block;
width: 100%;
}
.image-comparison-slider__title {
text-align: center;
}
.image-comparison-slider__container,
.image-comparison-slider__image-holder {
position: relative;
}
.image-comparison-slider__bottom-image {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 50%;
}
.image-comparison-slider__caption {
position: absolute;
padding: 1rem;
color: white;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
white-space: nowrap;
}
.image-comparison-slider__top-image .image-comparison-slider__caption {
top: 0;
left: 0;
}
.image-comparison-slider__bottom-image .image-comparison-slider__caption {
bottom: 0;
right: 0;
}
.image-comparison-slider__image {
display: block;
z-index: 1;
}
.image-comparison-slider__bottom-image .image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
}
.image-comparison-slider__slider {
position: absolute;
z-index: 3;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 50px;
height: 50px;
background-color: rgba(255, 96, 38, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
}
.image-comparison-slider__slider:after {
content: "< >";
color: white;
font-weight: bold;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
<div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
<img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
<div class="image-comparison-slider__caption">Left Image</div>
</div>
<div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
<img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
<div class="image-comparison-slider__caption">Right Image</div>
</div>
</div>
Fiddle link for code
Ok have managed to fix this - the touch wasn't registering because of the transform so I changed that and just used negative margin as the button was a fixed size.
I then had to fix the thisEvent.pageX for android - so did a check with isNaN and then set it to e.originalEvent.touches[0].pageX if it was true.
Working version:
(() => {
$.fn.imageComparisonSlider = function() {
var returnValue = this.each((index, item) => {
var $container = $(this);
var $overlay = $container.find('.image-comparison-slider__bottom-image');
var $slider = $('<span class="image-comparison-slider__slider"></span>');
var $window = $(window);
var touchStarted = false;
var width = $container.outerWidth();
$container.prepend($slider);
$container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
event.preventDefault();
console.log('touchstart');
touchStarted = true;
});
$window.on("mousemove touchmove", windowEvent => {
if (touchStarted) {
// get the cursor's x position:
let pos = getCursorPos(windowEvent);
// prevent the slider from being positioned outside the image:
if (pos < 0) pos = 0;
if (pos > width) pos = width;
// execute a function that will resize the overlay image according to the cursor:
slide(pos);
}
});
$window.on('mouseup touchend', event => {
event.preventDefault();
touchStarted = false;
});
function getCursorPos(e) {
var thisEvent = e || window.event;
let xVal = thisEvent.pageX;
if (isNaN(xVal)) {
xVal = e.originalEvent.touches[0].pageX;
}
// calculate the cursor's x coordinate, relative to the image
return xVal - $container.offset().left;
}
function slide(x) {
// set the width of the overlay
$overlay.width(width - x);
// position the slider
$slider[0].style.left = x + 'px';
}
function resetSlider() {
$overlay.width('50%');
$slider[0].style.left = $overlay.width() + 'px'
width = $container.outerWidth();
}
});
return returnValue;
};
})($);
$('.image-comparison-slider__container').imageComparisonSlider();
.image {
display: block;
width: 100%;
}
.image-comparison-slider__title {
text-align: center;
}
.image-comparison-slider__container,
.image-comparison-slider__image-holder {
position: relative;
}
.image-comparison-slider__bottom-image {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 50%;
}
.image-comparison-slider__caption {
position: absolute;
padding: 1rem;
color: white;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
white-space: nowrap;
}
.image-comparison-slider__top-image .image-comparison-slider__caption {
top: 0;
left: 0;
}
.image-comparison-slider__bottom-image .image-comparison-slider__caption {
bottom: 0;
right: 0;
}
.image-comparison-slider__image {
display: block;
z-index: 1;
}
.image-comparison-slider__bottom-image .image {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
}
.image-comparison-slider__slider {
position: absolute;
z-index: 3;
cursor: ew-resize;
width: 50px;
height: 50px;
background-color: rgba(255, 96, 38, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: -25px 0 0 -25px;
}
.image-comparison-slider__slider:after {
content: "< >";
color: white;
font-weight: bold;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
<div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
<img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
<div class="image-comparison-slider__caption">Left Image</div>
</div>
<div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
<img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
<div class="image-comparison-slider__caption">Right Image</div>
</div>
</div>
I try to build a Slideshow in JS + CSS and it works pretty well except one visual glitch. The Transition to the last slides seems somehow broken.
But I couldn't figure out what the problem is. If I comment out the "offset" transition on the last slide, the error doesn't occure.
This is the codeine I am talking about: https://codepen.io/marianbreitmeyer/pen/paeYgZ
The Block of code I mentioned is this one:
const showNext = function() {
clicked = true;
for (i = 0; i <= slides.length-1; i++) {
if( parseInt(slides[i].style.zIndex) === slides.length) {
console.log(slides[i].innerHTML);
triggerAnimation(slides[i], 'offcanvas');
} else if (parseInt(slides[i].style.zIndex) === slides.length-1) {
//the line below triggers the problem
triggerAnimation(slides[i], 'offset');
}
}
};
Maybe someone with more experience could help me :)
Your code might be more simple:
const btn = document.getElementsByClassName('arrow')[0];
const slides = document.getElementsByClassName('slide');
slides[slides.length - 1].classList.add('offset', 'next');
btn.addEventListener("click", function(e) {
var o, n;
for (var i = 0; i < slides.length; i++) {
if (slides[i].classList.contains('offset')) {
slides[i].classList.remove('offset', 'next')
slides[i].classList.add('offcanvas');
o = (slides[i - 1] || slides[slides.length - 1]);
n = (slides[i - 2] || slides[slides.length + i - 2]);
}
if (slides[i].offsetLeft < -slides[i].offsetWidth) {
slides[i].classList.remove('offcanvas', 'next');
}
}
o.classList.add('offset');
n.classList.add('next');
}, false);
.container {
width: 100%;
height: 100vh;
background: brown;
position: relative;
}
body {
text-align: center;
font-size: 2rem;
}
.slide {
position: absolute;
top: 0;
left: 90%;
width: 100%;
height: 100%;
}
.slide:nth-child(1) {
background: pink;
}
.slide:nth-child(2) {
background: blue;
}
.slide:nth-child(3) {
background: green;
}
.slide:nth-child(4) {
background: grey;
}
.slide:nth-child(5) {
background: yellow;
}
.slide.next {z-index:1}
.slide.offset {
left: -10%;
z-index: 2;
transition: left .65s ease-in-out;
}
.slide.offcanvas {
left: -110%;
z-index: 2;
transition: left .65s ease-in-out;
}
.arrow {
position: absolute;
right: 5%;
top: 25px;
z-index: 9;
height: 50px;
width: 50px;
cursor: pointer;
}
.arrow:hover path {
transform: translate(16px, 0px);
}
path {
position: absolute;
top: 0;
left: 0;
transition: all .2s ease-in-out;
}
<div class="container">
<div class="slide">1 = pink</div>
<div class="slide">2 = blue</div>
<div class="slide">3 = green</div>
<div class="slide">4 = grey</div>
<div class="slide">5 = yellow</div>
<svg xmlns="http://www.w3.org/2000/svg" class="arrow"><path d="M19.443 5.17L30.138 15.5H-.095v1h30.233L19.443 26.829l.696.719L32.095 16 20.139 4.451z"/></svg>
</div>