Cloning elements

@codyhillJul 26.2019

Hi, I am trying to figure out how to build a carousel. And I want to make it start over with a smooth transition and for that, I need to copy the first slide to the back and the last slide to the front.

I managed to clone de slides but I have a few problems.

1. I can see my elements when I console.log but I can’t see them in my project. I have 3 slides and with the clones, I should have 5 but that isn’t the case. When I get to the last slide an error fires in the console saying that it can not read the code that moves the track.
[code]track.style.transform = ‘translateX(-‘+ targetSlide.style.left +’)’;[/code]

2. The clones are added last. And when I am trying to push the last slide to the front another error fires that is saying that track.push(lastSlideCopy) is not a function.

3. I have some weird interaction where the middle slide is too small or the next buttons and prev button don’t like that should. Works only 1 of them or prev goes to the last slide and next to the first etc. But if I refresh the page everything goes to normal.

Here is the CodePen: https://codepen.io/raul-rogojan/pen/BXoWBq?editors=0010

to post a comment

JavaScript

17 Comments(s) _↴

@SempervivumJul 26.2019 — #The HTML inspector tells me that there a five slides indeed. However they are not visible to the user. Probably you have to do the initialisation for the slides having been added either.

@codyhillauthorJul 26.2019 — #@Sempervivum#1606791 How do I do that?

@KeverJul 26.2019 — #What kind of effect do you want when your carousel starts over? A bounce-back or an endless shift from right to left. The bounce-back is quite easy to code. The endless loop effect is a pain to code. You'll have to shift elements around, but will have to wait until the transition effect ends.

Here's the code for the bounce-back effect:

const track = document.querySelector('[data-track]');
 const slides = Array.from(track.children);
 const prevButton = document.querySelector('[data-left]');
 const nextButton = document.querySelector('[data-right]');
 const slideWidth = slides[0].getBoundingClientRect().width;
 var currenIndex = 0;
 
 
 const setSlidePosition = (slide, index) =&gt; {
 slide.style.left = slideWidth * index + 'px';
 };
 slides.forEach(setSlidePosition);
 
 const moveToSlide = (track, currentSlide, targetSlide) =&gt; {
 track.style.transform = 'translateX(-'+ targetSlide.style.left +')';
 currentSlide.classList.remove('current-slide');
 targetSlide.classList.add('current-slide');
 };
 
 const moveSlide = (direction, e) =&gt; {
 const currentSlide = track.querySelector('.current-slide');
 const nextSlide = track.children[currenIndex = (direction + currenIndex + slides.length) % slides.length];
 moveToSlide(track, currentSlide, nextSlide);
 };
 
 nextButton.addEventListener('click', moveSlide.bind(null, +1));
 prevButton.addEventListener('click', moveSlide.bind(null, -1));

@codyhillauthorJul 26.2019 — #@Kever#1606798 I want a bounce back but I want it to be hidden. That's why I need the clones. to make it look smooth. Kinda like this tutorial. https://www.youtube.com/watch?v=KcdBOoK3Pfw&t=962s

But I want to make it so if you would have to add another img to it will still work without changing the code.

@SempervivumJul 27.2019 — #I watched the tutorial and liked it. Obviously inserting the clones automatically can be done easily: You have to add them [b]before[/b] the nodelist containing the images is created, i. e. at the very beginning of the javascript. Doing so they will be included in the initialisation procedure.

@daveyerwinJul 27.2019 — #maybe this is what you want ?

for demo go here

https://www.handgunsforhomeless.com/raul/

``<i>
 </i>&lt;style&gt;
 main{
 width: 800px;
 margin: auto;
 
 }
 
 main &gt; div {
 width: 300px;
 height: 200px;
 margin: 20px auto;
 position: relative;
 overflow: hidden;
 }
 main &gt; div &gt; div {
 position: absolute;
 width: 100%;
 height: 100%;
 
 }
 
 main &gt; div &gt; div:nth-child(1) {
 background: url(homestead/mydiningroom.jpg)no-repeat center;
 background-size: cover;
 animation:fade 20s infinite;
 -webkit-animation:fade 20s infinite;
 -moz-animation:fade 20s infinite;
 color: blue;
 } 
 main &gt; div &gt; div:nth-child(2) {
 background: url(homestead/mylivingroom.jpg)no-repeat center;
 background-size: cover;
 animation:fade2 20s infinite;
 -webkit-animation:fade2 20s infinite;
 -moz-animation:fade2 20s infinite;
 color: lightblue;
 }
 main &gt; div &gt; div:nth-child(3) {
 background: url(homestead/myden.jpg)no-repeat center;
 background-size: cover;
 animation:fade3 20s infinite;
 -webkit-animation:fade3 20s infinite;
 -moz-animation:fade3 20s infinite;
 color: lightblue;
 }
 @keyframes fade
 {
 0%   {left: 300px}
 16.666% { left: 0}
 33.333% { left: 0}
 50% { left: -300px}
 66.666% { left: -300px}
 83.333% { left: -300px} 
 100% { left: -300px}
 }
 @keyframes fade2
 {
 0%   {left: 300px}
 16.666% { left: 300px}
 33.333% { left: 300px}
 50% { left: 0}
 66.666% { left: 0}
 83.333% { left: -300px} 
 100% { left: -300px}
 }
 @keyframes fade3
 {
 0%   {left: 0}
 16.666% { left: -300px;}
 33.333% { left: -300px}
 50% { left: -300px}
 66.666% { left: -300px;}
 66.6667% { left: 300px;} 
 83.333% { left: 0}
 100% { left: 0}
 }
 &lt;/style&gt;
 &lt;main&gt;
 &lt;div&gt;
 &lt;div&gt;my dinning room&lt;/div&gt;
 &lt;div&gt;my living room&lt;/div&gt;
 &lt;div&gt;my den&lt;/div&gt;
 &lt;/div&gt;
 &lt;/main&gt;<i>
 </i>``

@codyhillauthorJul 28.2019 — #@DaveyErwin#1606829 Not really but damn! I am impressed you did that only with css.

@codyhillauthorJul 28.2019 — #@Sempervivum#1606821 Hi, I did that and it messed up completely.

@SempervivumJul 28.2019 — #@RaulRogojan#1606831 Please post your code, I'm quite shure that it can be fixed easily.

@codyhillauthorJul 28.2019 — #@Sempervivum#1606833 https://codepen.io/raul-rogojan/pen/BXoWBq

I don't know. It has some weird interactions.

@SempervivumJul 28.2019 — #My recommendation referred to the code in that video tutorial. However the code in your fiddle is different. Unfortunately I dont't have time to dive into it.

@codyhillauthorJul 28.2019 — #@Sempervivum#1606837 No problem! You cand do it when you have time if you want. Thanks!

@daveyerwinJul 28.2019 — #try this demo

https://www.handgunsforhomeless.com/raul/test.php

@codyhillauthorJul 28.2019 — #@DaveyErwin#1606851 yep, that's the effect I want.

@opendllJul 29.2019 — #Hello,

I did that and it messed up complete.

[open dll file](https://opendllfiles.com/)

@codyhillauthorJul 29.2019 — #@Sempervivum#1606837 Hey, I kinda fixed the issue. Now for the first slide, this code does not apply.

const slideWidth = slides[0].getBoundingClientRect().width;
 
 const setSlidePosition = (slide, index) =&gt; {
 slide.style.left = slideWidth * index + 'px';
 };
 
 slides.forEach(setSlidePosition);

This is what I use to move the slides. You can go here to see what is happening.

https://codepen.io/raul-rogojan/pen/BXoWBq?editors=0010

@opendllApr 23.2020 — #I didn't the reply yet now, any body give the relpy about [vob file](https://opencrdownloadfile.co/open-vob-file/)

thanks

Also in #JavaScript _↴

help needed> form validation script help with onunload DOM conflict between IE and Firefox

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This

Cloning elements

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Cloning elements

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴