Overview
You can create a carousel or a slideshow using Bootstrap. These can be done by adding classes in addition to the current class you already have.
Make sure you have ecommerce enabled on your back office and if you did not get this module please contact our team at 320-230-2282
Here is an example:
Procedure
Here are the steps on how to make a carousel
- Log in to your back office
- Click on Admin -> Alter Layout
- Scroll down to the Advanced Category and we are going to alter the Catalog Top Html textbox.
Most text box will have a code like this:
Now lets add <div id="eshop-control" class="slideshow carousel slide" data-ride="carousel"> before the <div class="full-page-header"> and add </div> to the end of the last </div>.
This will tell the eshop that inside of this <div> we are creating a slideshow.In the <div class="full-page-header"> add "carousel-inner" class in without the quotes.
Let us add the "carousel-item" in the <div class="full-page-header-content"> to indicate that this <div> is one of the slide that you want to show up in the slideshow. Since this is the first slide show let us add "active" to indicate this is the first slide that will show up initially the page loads.
You can now copy the "full-page-header-content" and the codes within it to create more slides.
Here is an example code that you can use to create a slideshow with 4 slides in it.
Note that there is no "active in the other <div class="full-page-header-content carousel-item"> cause there is only 1 active slide at the same time.You can also add controls in the carousel and you can follow the bootstrap documentation on how to do that.
https://getbootstrap.com/docs/4.0/components/carousel/
References
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article