CODEWITHSUNDEEP
javascript
Mike Phelps
Mike Phelps

Reputation: 21

Image Carousel in Vanilla JS

Preface: Still learning, so some things may not look like they should.

So as a practice, I'm trying to create an Image Carousel in Vanilla Javascript. I've created the HTML class where I want to put it:

<div class="carousel-container">
  </div>

Created an array for the images, and I've created a component function for creating the image div. For debugging purposes, I've console.logged the result of the function, just to see if the card is created. 

const entryPoint = document.querySelector('.carousel-container');
const images = [
  '/assets/img1.jpeg',
  '/assets/img2.jpeg',
  '/assets/img3.jpeg',
  '/assets/img4.jpeg',
];

function createSlides(slide) {
  const carousel = document.createElement('div'),
    left = document.createElement('div'),
    image = document.createElement('img'),
    right = document.createElement('div');

  left.classList.add('left-button');
  right.classList.add('right-button');

  image.attribute.src = slide;

  carousel.appendChild(left);
  carousel.appendChild(img);
  carousel.appendChild(right);

  entryPoint.appendChild(carousel);

  console.log(carousel);
}

images.forEach(item => {
  createSlides(element);
});

the problem is, it's NOT being created. Nothing is showing in the console either, so I can't exactly see what I've got going wrong. And yes, the images exist on my local drive, in the file structure that they are displayed.

Any thoughts?

Upvotes: 1

Views: 919

Answers (2)

Mike Phelps
Mike Phelps

Reputation: 21

I got it.. I forgot to pull the js file into the html.. RIP

Upvotes: 1

ssbarbee
ssbarbee

Reputation: 1712

I am pretty much sure that it throws error

Cannot read property 'src' of undefined

Due to the fact that image.attribute.src = slide; is incorrect. It should be image.src = slide.

Upvotes: 0

Related Questions