I have been trying to make a damned carousel for the past 2 days and for the life of me, I cannot do it on my own.

First, I’ve tried this: https://splidejs.com/ . Had no idea how to customize it or how to actually make it work.

Next, I’ve gave https://gs-shop.github.io/vue-slick-carousel/#/example/simple a try, but after a great start, I ended up with a broken carousel that couldn’t even play the simplest of the examples.

Now I am looking at Bootstrap, but I cannot find a carousel example that suits my need. Every carousel guide/tutorial online looks the same. I’ve also tried the basic example but it does not work… I don’t even know if I installed it correctly because every documentation says something else. This is how I’ve installed it:

npm i bootstrap jquery popper.js
npm install bootstrap-vue

And I am trying to use only the Carousel component, because I don’t need the rest.
So, inside a component I’ve done this:
<div class="portfolio-lower">
<BCarousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333"
u/sliding-start="onSlideStart"
u/sliding-end="onSlideEnd"
>
<BCarouselSlide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="@/assets/images/image1.jpg"
></BCarouselSlide>
<BCarouselSlide
caption="Second slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="@/assets/images/image2.jpg"
></BCarouselSlide>
</BCarousel>
</div>

import { BCarousel } from "bootstrap-vue";
import { BCarouselSlide } from "bootstrap-vue";

components: { BCarousel, BCarouselSlide },

And this is the result:

r/webdev - How does one make a Carousel with text instead of dots ?

it overflows to the next page

I need 2 carousels:

r/webdev - How does one make a Carousel with text instead of dots ?

this

r/webdev - How does one make a Carousel with text instead of dots ?

that

That’s all I need. And I cannot do it on my own. I have to accept defeat and get some help.

Please help this noob web-dev learn how to create a carousel.

Thank you.



Source link

Write A Comment