Setting transistionDuration property does not work #2
Comments
|
Notice the typo in your code: transistion vs. transition |
|
Yes, I had a typo while composing the issue report but I assure you it was triple checked in my code. I didn't copy and paste the example code into the bug report. Here's a CodePen to illustrate the problem. Note that because I couldn't find an easy CDN for the script, I just copied and pasted it into the JavaScript side. Not ideal, but a quick way to show that the bug exists. |
|
Yes, you're right, the CodePen you provided does not work. However, this code snippet works: <!DOCTYPE html>
<html>
<head>
<script defer src='wc-carousel-lite.min.js'></script>
</head>
<script>
function start() {
const carousel = document.createElement("wc-carousel-lite");
carousel.innerHTML = `
<img src="https://placekitten.com/g/400/200" class="item" width="400">
<img src="https://placekitten.com/g/300/200" class="item" width="300">
<img src="https://placekitten.com/g/250/200" class="item" width="250">
`
carousel.transitionDuration = 3000;
carousel.interval = 6000;
carousel.infinite = true;
carousel.autoplay = true;
document.getElementById('target').appendChild(carousel);
}
</script>
<body onload="start();">
<div id="target"></div>
</body>
</html>Unfortunately, I have no idea why your CodePen doesn't work but that code snippet works. |
|
Where is your copy of Demo site: http://135.181.40.67/wc-carousel-lite/ |
|
Here it is: http://135.181.40.67/wc-carousel-lite/wc-carousel-lite.min.js For the code snippet I just wrote, I just keep |
|
So, what is the issue with the first version on CodePen? I checked again and it appears that I am doing everything correctly but I still may have mistyped something. Did you copy and paste my JavaScript and give it a shot? What's the path forward for this issue? |
I tried this and it did not work.
The carousel appears when I add it to the DOM but there's no transition. It was weird because I had a hardcoded example working fine in HTML, so I tried an attribute.
This showed the carousel but the transition duration appeared to be the same length as the interval; both appeared to be set to 1000ms. So I tried setting the interval through an attribute.
This worked.
Either the documentation is wrong and
transitionDurationcan't be set or this is a minor bug in the component.The text was updated successfully, but these errors were encountered: