pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

swiper 설치

pull/2/head
junh_eee(이준희) 10 months ago
parent
2807115f84
commit
6bc05f282d
2 changed files with 123 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 122
      src/components/laanc/map/LaancAreaMap.js

2
package.json
Unescape View File

@ -113,7 +113,7 @@
"styled-components": "5.1.1",
"sweetalert2": "10.14.0",
"sweetalert2-react-content": "3.0.1",
"swiper": "6.0.4",
"swiper": "^6.0.4",
"three": "0.124.0",
"threebox-plugin": "2.2.7",
"typesafe-actions": "^5.1.0",

122
src/components/laanc/map/LaancAreaMap.js
Unescape View File

@ -3,6 +3,7 @@ import mapboxgl from 'mapbox-gl';
import threebox from 'threebox-plugin';
import MapboxLanguage from '@mapbox/mapbox-gl-language';
import { MAPBOX_TOKEN } from '../../../configs/constants';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Card, CardBody } from 'reactstrap';
@ -326,6 +327,127 @@ export default function LaancAreaMap({
<CardBody>
<div style={{ position: 'relative' }}>
<LaancMapSearch mapObject={mapObject} />
<div className='d-flex coords-wrap'>
<Swiper direction='horizontal' loop={false} grabCursor={true}>
<SwiperSlide
// style={{
// display: 'inline-block',
// verticalAlign: 'top',
// marginRight: '10px'
// }}
>
<div className='coords-box'>
<div>
<h6 className='ti'>비행구역 1</h6>
<div className='coords-box-scroll'>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide
// style={{
// display: 'inline-block',
// verticalAlign: 'top',
// marginRight: '10px'
// }}
>
<div className='coords-box'>
<div>
<h6 className='ti'>비행구역 1</h6>
<div className='coords-box-scroll'>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide
// style={{
// display: 'inline-block',
// verticalAlign: 'top',
// marginRight: '10px'
// }}
>
<div className='coords-box'>
<div>
<h6 className='ti'>비행구역 1</h6>
<div className='coords-box-scroll'>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide
// style={{
// display: 'inline-block',
// verticalAlign: 'top',
// marginRight: '10px'
// }}
>
<div className='coords-box'>
<div>
<h6 className='ti'>비행구역 1</h6>
<div className='coords-box-scroll'>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
<div className='coords-box-list'>
<span>
<span>126.6058737, 37.5220027</span>
<span className='etc'>/</span>
<span>126.6058093, 37.5188038</span>
</span>
</div>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
</div>
<div className='d-flex coords-wrap'>
{viewCoordObj?.map((obj, i) => {
let coord =

Write Preview
Loading…
Cancel
Save