Skip to content

Commit

Permalink
Add Carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
@andy89923
andy89923 committed Jan 11, 2023
1 parent c2a588a commit 6afd3f5
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 56 deletions.
100 changes: 46 additions & 54 deletions movis/src/pages/ctfangland/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import { api } from "../../utils/api";
import type { MovieData, Subset } from "../../utils/myClasses";
import { AllGenres } from "../../utils/myClasses";

import { Carousel } from "flowbite";
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

import {
Chart as ChartJS,
CategoryScale,
Expand All @@ -26,6 +23,9 @@ import {
import { Bar } from "react-chartjs-2";
import { ChartOptions, getTopElementCount } from "../../utils/chartUtils";

import { Carousel } from "flowbite-react";
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite-react";

ChartJS.register(
CategoryScale,
LinearScale,
Expand All @@ -35,64 +35,56 @@ ChartJS.register(
Legend
);


// const carousel: CarouselInterface = new Carousel(items, options);

// carousel.cycle()

// // set event listeners for prev and next buttons
// const $prevButton = document.getElementById('data-carousel-prev');
// const $nextButton = document.getElementById('data-carousel-next');

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

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

const MyCarousel = () => {


return (
<div id="default-carousel" class="relative" data-carousel="static">
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
<div id="carousel-item-1" class="hidden duration-700 ease-in-out">
<span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="https://m.media-amazon.com/images/I/71aBLaC4TzL._AC_SL1330_.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
</div>
<div id="carousel-item-2" class="duration-700 ease-in-out">
<span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="https://m.media-amazon.com/images/I/61QPrqydVoL._AC_SY679_.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
</div>
<div id="carousel-item-3" class="hidden duration-700 ease-in-out">
<span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="https://m.media-amazon.com/images/I/714hR8KCqaL.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
</div>
<Carousel>
<img src="https://m.media-amazon.com/images/I/71aBLaC4TzL._AC_SL1330_.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
<img src="https://m.media-amazon.com/images/I/61QPrqydVoL._AC_SY679_.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
<img src="https://m.media-amazon.com/images/I/714hR8KCqaL.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
</Carousel>
);

// return (
// <div id="default-carousel" class="relative" data-carousel="static">
// <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
// <div id="carousel-item-0" class="hidden duration-700 ease-in-out">
// <span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
// <img src="https://m.media-amazon.com/images/I/71aBLaC4TzL._AC_SL1330_.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
// </div>
// <div id="carousel-item-1" class="hidden duration-700 ease-in-out">
// <span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
// <img src="https://m.media-amazon.com/images/I/61QPrqydVoL._AC_SY679_.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
// </div>
// <div id="carousel-item-2" class="hidden duration-700 ease-in-out">
// <span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
// <img src="https://m.media-amazon.com/images/I/714hR8KCqaL.jpg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="..."></img>
// </div>


</div>
// </div>

<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
</div>
// <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
// <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 1" data-carousel-slide-to="0"></button>
// <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
// <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
// </div>

<button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
);
// <button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
// <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
// <span class="sr-only">Previous</span>
// </span>
// </button>
// <button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
// <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 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 aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
// <span class="sr-only">Next</span>
// </span>
// </button>
// </div>
// );
}


Expand Down
6 changes: 4 additions & 2 deletions movis/tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/flowbite-react/**/*.js"],
theme: {
extend: {},
},
plugins: [],
plugins: [
require("flowbite/plugin")
],
};

0 comments on commit 6afd3f5

Please sign in to comment.