Convert jQuery snippet to plain javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

        $(document).ready(function () {

            $('.carousel .item').each(function () {

                var next = $(this).next();

                if (!next.length) {

                    next = $(this).siblings(':first');

                }

                next.children(':first-child').clone().appendTo($(this));

                if (next.next().length > 0) {

                    next.next().children(':first-child').clone().appendTo($(this));

                } else {

                    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));

                }

            });

        });

   

Example: $(document).ready(function () {

 to 

document.addEventListener('DOMContentLoaded', function () {

EDIT: https://pastebin.com/Fcg5cA4d . pastebin with the html/css for the carousel I need (currently with Jquery
Blop 4 months ago
awarded to Titus

Crowdsource coding tasks.

1 Solution

Winning solution

Try this:

document.addEventListener("DOMContentLoaded", function () {
  var elms = document.querySelectorAll(".carousel .item");
  var toAppend = [];
  for(var i = 0; i < elms.length; i++){
    var nextIndex = (i+1)%elms.length;
    var nextNextIndex = (i+2)%elms.length;
    toAppend.push([elms[nextIndex].firstElementChild.cloneNode(true), elms[nextNextIndex].firstElementChild.cloneNode(true)]);
  }
  console.log(j);
  for(var j = 0; j < elms.length; j++){
    elms[j].appendChild(toAppend[j][0]);
    elms[j].appendChild(toAppend[j][1]);
  }
});

Here is a working snipped https://jsbin.com/zicuquqeta/edit?html,js,output

hmmm doesn't look like it worked, want me to post a pastebin with the html/css?, it's for a carousel Edit: https://pastebin.com/Fcg5cA4d
Blop 4 months ago
@Blop I've edited my solution, I think it will do work correctly now.
Titus 4 months ago
Hey, thanks for doing this, only thing left is that if you start by clicking on the left, it shows a blank page ^^ do you think you can fix this? :)
Blop 4 months ago
@Blop I've updated my solution to address that.
Titus 4 months ago
Thank you very much! Enjoy :)
Blop 4 months ago
I'm glad I could help and thank you too. I'm curious, why do you need this, you're using bootstrap to create the carousel and that requires jQuery.
Titus 4 months ago
I know right, I had a small assignment, just started coding a couple of days ago and while we could use Bootstrap, we couldn't use anything else other then CSS/HTML/JS and I needed a specific carousel like this one and thought maybe I could use some beer money for this, since we all have basically 0 skill in JS and even less in jQuery since we didn't do it yet ^^ maybe there was another way like pure CSS or something but idk :)
Blop 4 months ago