Image Carousel

Hello everyone! I am having a problem with trying to get an image carousel on my web page. I am making a store and I want to products to be shown with a carousel. My questions are:

  1. Would it be better to make a carousel with bootstrap or HTML,CSS, and JavaScript?
  2. Where would you find a good reference for your choice?

The reason I ask, is because I have tried multiple youtube channels, and even the bootstrap site to help me and for some reason my carousel either won’t show on my screen or won’t work at all! I wanted to use bootstrap but I am having no luck, would anyone have any advice?

Hi @calvinalee2006
I appreciate the easily customizable SCSS source code of Bootstrap with many functions which make the CSS very flexible and extendable (other than the UIkit SCSS source code for example, which I find very static). But it takes time to follow down the path of the SCSS variables and customize them for your needs. I don’t know the JavaScript source code of Bootstrap though.
Below the line I would make the decision dependable on the size and design of your project. If you have a large project with a great amount of elements to style and many different components, it might be worth using Bootstrap. If it is a rather small project with extraordinary design, it might be faster to build the CSS and JS yourself.
Generally, I find the components of Bootstrap rather well documented and easy to use. Where do you struggle, do you have some code to provide?

Hey! Thanks for the input! I am still working out the kinks, but this is what I have thus far, I provided my github account page, let me know if this source works for you!

Thank you!

Hi Calvin,
so you’ve decided to implement your shop without Bootstrap?
This is the error I get when I click on the arrow to slide to the right:
‘index.html:56 Uncaught ReferenceError: plusSlides is not defined
at HTMLAnchorElement.onclick (index.html:56)’
This is the button I clicked:

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

In your js there is no function with the name plusSlides.
This is how I’d do it:
I’d give each bullet a data-attribute like data-target='slide-1'.
On click you call a function that gets the data-attribute and extracts the number from it. Then it sets a class active to the slide container with the index you extracted from the data attribute and removes the active class from the current active element.
On click on the arrows I’d call a function which just stores the current index, counts up or down and then calls the other function which sets the class. The rest could be done with CSS.
With Bootstrap it would be faster, this way you’d learn more JS…