carrusel.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. * {
  2. box-sizing: border-box;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body {
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. height: 100vh;
  11. background-color: #f4f4f4;
  12. }
  13. .carousel-container {
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. position: relative;
  18. }
  19. .carousel {
  20. display: flex;
  21. transition: transform 0.4s ease-in-out;
  22. overflow: hidden;
  23. width: 300px;
  24. height: 200px;
  25. }
  26. .carousel-track {
  27. display: flex;
  28. transition: transform 0.4s ease-in-out;
  29. }
  30. .card {
  31. min-width: 100%;
  32. height: 100%;
  33. background-color: #fff;
  34. display: flex;
  35. justify-content: center;
  36. align-items: center;
  37. font-size: 24px;
  38. border: 1px solid #ddd;
  39. border-radius: 10px;
  40. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  41. }
  42. .carousel-controls {
  43. display: flex;
  44. justify-content: space-between;
  45. margin-top: 15px;
  46. }
  47. .carousel-btn {
  48. background-color: #333;
  49. color: #fff;
  50. border: none;
  51. padding: 10px;
  52. cursor: pointer;
  53. border-radius: 50%;
  54. }