465-refactor: Customize slider

src/entities/events/ui/event-card/event-card.module.scss

@@ -89,15 +89,14 @@
         overflow: hidden;
         display: -webkit-box;
         -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
 
         max-height: 40px;
         margin-top: 0;
         margin-bottom: 8px;
 
         font-size: 16px;
         text-overflow: ellipsis;
-
-        -webkit-line-clamp: 2;
       }
     }
   }

src/widgets/events/ui/events.tsx

@@ -24,7 +24,7 @@ const actualEvents: EventCardProps[] = getActualData({
 
 const nearestEvents = actualEvents.slice(0, displayedCardsQuantity);
 
-const Stub = <Image src={photo3} />;
+const Stub = <Image src={photo3} alt="Community event" />;
 
 export const Events = () => {
   const rsLifetime = dayjs().diff('2013', 'year');

src/widgets/pictures/pictures.test.tsx

@@ -22,7 +22,7 @@ describe('Pictures', () => {
   it('renders the carousel with images', () => {
     const images = screen.getAllByTestId('carousel-image');
 
-    expect(images.length).toBe(9);
+    expect(images.length).toBe(11);
   });
 
   it('renders the social media links correctly', () => {

src/widgets/pictures/ui/pictures.scss

@@ -1,85 +1,46 @@
-.pictures {
-  & .social-media-container {
-    @include media-tablet {
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-    }
-
-    display: flex;
-    align-items: flex-start;
-  }
-}
-
-.pictures .carousel-root {
-  @include media-laptop {
-    width: 100%;
-    max-width: 730px;
-    height: 369px;
-  }
-
-  @include media-tablet {
-    width: 100%;
-    max-width: 358px;
-    height: 210px;
-    padding: 0 0 25px;
-  }
-
-  @include media-mobile {
-    width: 100%;
-    height: auto;
+.carousel {
+  .slide {
+    cursor: pointer;
+    padding: 0 5px;
   }
 
-  width: 1200px;
-  height: 540px;
-  margin: 16px auto;
-  padding: 10px 10px 40px;
-}
+  .carousel-slider {
+    .control-next,
+    .control-prev {
+      top: calc(50% - 50px);
 
-.carousel {
-  @include media-laptop {
-    height: 369px;
-  }
+      height: 100px;
 
-  @include media-tablet {
-    height: 210px;
+      opacity: $opacity-100;
+      backdrop-filter: blur(20px);
+      border-radius: 8px;
+    }
   }
 
-  height: 540px;
-}
+  .control-dots {
+    left: calc(50% - 150px);
 
-.slider {
-  @include media-laptop {
-    height: 325px;
-  }
+    width: 300px;
+    margin: 0;
+    padding: 8px;
 
-  @include media-tablet {
-    height: 175px;
+    backdrop-filter: blur(10px);
   }
 
-  @include media-mobile {
-    height: auto;
+  .dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
   }
-
-  height: 468px;
 }
 
-.carousel .slide {
-  @include media-laptop {
-    width: 730px;
-    height: 369px;
-  }
-
+.social-media-container {
   @include media-tablet {
-    width: 358px;
-    height: 210px;
-  }
-
-  @include media-mobile {
-    height: auto;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
   }
 
-  width: 750px;
-  height: 468px;
-  margin-right: 10px;
+  display: flex;
+  align-items: flex-start;
 }

src/widgets/pictures/ui/pictures.tsx

@@ -44,18 +44,37 @@ const socialMedia: SocialMediaProps[] = [
 const photos = [photo1, photo2, photo3, photo4, photo5, photo6, photo7, photo8, photo9];
 
 export const Pictures = () => (
-  <div className="pictures container">
-    <div className="pictures content">
+  <section className="container">
+    <div className="content">
       <WidgetTitle mods="asterisk">The Rolling Scopes in pictures</WidgetTitle>
       <Carousel
         className="carousel"
         showArrows={true}
         showThumbs={false}
         showStatus={false}
         centerMode={true}
+        emulateTouch={true}
+        autoPlay={true}
+        transitionTime={1000}
+        useKeyboardArrows={true}
+        infiniteLoop={true}
+        renderIndicator={(onClickHandler, isSelected, index) => (
+          <li
+            className={isSelected ? 'dot selected' : 'dot'}
+            onClick={isSelected ? undefined : onClickHandler}
+            value={index}
+            key={index}
+            tabIndex={0}
+          />
+        )}
       >
-        {photos.map((photo) => (
-          <Image src={photo} key={photo} data-testid="carousel-image" />
+        {photos.map((photo, index) => (
+          <Image
+            src={photo}
+            key={index}
+            data-testid="carousel-image"
+            alt="Photo of our community"
+          />
         ))}
       </Carousel>
       <Paragraph>
@@ -68,5 +87,5 @@ export const Pictures = () => (
         ))}
       </div>
     </div>
-  </div>
+  </section>
 );