added arrow navigation for swiper

src/components/flow/FlowRecent/index.tsx

@@ -11,7 +11,6 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => {
   return (
     <>
       {updated && updated.map(node => <FlowRecentItem node={node} key={node.id} has_new />)}
-
       {recent && recent.map(node => <FlowRecentItem node={node} key={node.id} />)}
     </>
   );

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -1,12 +1,13 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { INodeComponentProps } from '~/redux/node/constants';
-import SwiperCore, { A11y, Pagination, SwiperOptions } from 'swiper';
+import SwiperCore, { A11y, Pagination, Navigation, SwiperOptions, Keyboard } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/swiper.scss';
 import 'swiper/components/pagination/pagination.scss';
 import 'swiper/components/scrollbar/scrollbar.scss';
 import 'swiper/components/zoom/zoom.scss';
+import 'swiper/components/navigation/navigation.scss';
 
 import styles from './styles.module.scss';
 import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
@@ -16,13 +17,14 @@ import SwiperClass from 'swiper/types/swiper-class';
 import { modalShowPhotoswipe } from '~/redux/modal/actions';
 import { useDispatch } from 'react-redux';
 
-SwiperCore.use([Pagination, A11y]);
+SwiperCore.use([Navigation, Pagination, A11y]);
 
 interface IProps extends INodeComponentProps {}
 
 const breakpoints: SwiperOptions['breakpoints'] = {
   599: {
     spaceBetween: 20,
+    navigation: true,
   },
 };
 
@@ -77,6 +79,10 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
         watchOverflow
         updateOnImagesReady
         onInit={resetSwiper}
+        keyboard={{
+          enabled: true,
+          onlyInViewport: false,
+        }}
         zoom
       >
         {images.map(file => (

src/components/node/NodeImageSwiperBlock/styles.module.scss

@@ -20,6 +20,17 @@
   :global(.swiper-container) {
     width: 100vw;
   }
+
+  :global(.swiper-button-next),
+  :global(.swiper-button-prev) {
+    color: white;
+    font-size: 10px;
+
+    &::after {
+      font-size: 32px;
+    }
+  }
+
 }
 
 .slide {

src/containers/node/NodeLayout/index.tsx

@@ -40,7 +40,7 @@ const NodeLayout: FC<IProps> = memo(
     const { head, block } = useNodeBlocks(current, is_loading);
 
     return (
-      <>
+      <div className={styles.wrap}>
         {head}
 
         <Container>
@@ -64,7 +64,7 @@ const NodeLayout: FC<IProps> = memo(
         </Container>
 
         <SidebarRouter prefix="/post:id" />
-      </>
+      </div>
     );
   }
 );

src/containers/node/NodeLayout/styles.module.scss

@@ -2,6 +2,8 @@
 
 .content {
   align-items: stretch !important;
+  background-color: red;
+
   @include vertical_at_tablet;
 }