Carousel Customization

[Dangelo-JAN]

Hi!, How are you? I'm trying to customize a carousel component in a react project using vite but I can't find how to set border-radius: 0px.

I tried using the tailwind classes directly but I doesn't works, also I tried to modify the default file inside the flowbite-react package and it doesn't works either.

If any one can help me how I can modify the carousel's border-radius or show the file where I can do it, I will appreciate that.

Thanks

[LBeukennoot]

There is a way: in the documentation of the carousel, this is my result:

I used Laravel, so in my case I added the js code from the documentation to /resources/js/app.js:

//instanciating the carousel variables
let items = []
let indicators = []

//adding the items to the carousel
for (let i = 0; i < members.length; i++) {
    items.push({
        position: i,
        el: document.getElementById('carousel-item-' + i)
    })
    
    indicators.push({
        position: i,
        el: document.getElementById('carousel-indicator-' + i)
    })
}

//carousel options
const options = {
    defaultPosition: 0,
    interval: 3000,
    
    indicators: {
        //this is the place to add classes for the indicators
        activeClasses: 'mb-3',
        inactiveClasses: 'mb-0',
        items: indicators
    },
};

//making next and previous button working
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');

$prevButton.addEventListener('click', () => {
    carousel.prev();
});

$nextButton.addEventListener('click', () => {
    carousel.next();
});

//'create' the carousel
const carousel = new Carousel(items, options);
carousel.cycle()

Then you only have to add the HTML code to the view:

  <section class="mt-10 md:p-8 flex justify-center">

      <div class="relative w-full lg:w-1/2">
          <!-- Carousel wrapper -->
          <div class="relative h-56 overflow-hidden rounded-lg sm:h-64 xl:h-80 2xl:h-96 bg-red">

              <!-- carousel items -->
              @foreach($members as $key => $member)

              <div id="carousel-item-{{ $key }}" class="hidden duration-700 ease-in-out">
                  <div class="">
                      <div class="flex justify-center mb-2 drop-shadow-lg">
                          <img class=" h-7 w-auto" style="image-rendering: pixelated;" src="./assets/images/ranks/tag_{{ $member->rank }}.png" alt="{{ $member->rank }}" id="{{ $member->rank }}">
                      </div>
                      <div class="flex justify-center mb-3 drop-shadow-md">
                          <p class="text-2xl font-minecraft">{{ $member->username }}</p>
                      </div>
                      <div class="flex justify-center">
                          <img class="drop-shadow-lg rounded-normal" src="https://cravatar.eu/helmavatar/{{ $member->username }}/90.png" alt="{{ $member->username }}" id="{{ $member->rank }}">
                      </div>
                  </div>

              </div>
              @endforeach

          </div>
          <!-- Slider indicators -->
          <div class="flex items-end h-14 gap-2 m-auto">

              <!-- previous button -->
              <button id="data-carousel-prev" type="button" class="cursor-pointer group focus:outline-none h-8">
              <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                      <svg class="w-2 h-2 text-white dark:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
                      </svg>
                      <span class="sr-only">Previous</span>
                  </span>
              </button>

              <!-- custom indicators -->
              @foreach($members as $key => $member)
              <button id="carousel-indicator-{{ $key }}" type="button" class="w-8 h-8 rounded-sm transition-all" aria-current="false" aria-label="Slide {{$key}}">
                  <img class="rounded-md" src="https://cravatar.eu/helmavatar/{{ $member->username }}/48.png" alt="{{ $member->username }}" id="{{ $member->rank }}">
              </button>
              @endforeach

              <!-- next button -->
              <button id="data-carousel-next" type="button" class="cursor-pointer group focus:outline-none h-8">
              <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                      <svg class="w-2 h-2 text-white dark:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
                      </svg>
                      <span class="sr-only">Next</span>
                  </span>
              </button>
          </div>

      </div>
</section>

Last thing is to add the custom variables to js, this is also placed in the HTML file:

<script>
    var members = {{Js::from($members)}};
</script>

I hope this info helps!