import React , { Component } from 'react' ; import ReactIdSwiper from 'react-id-swiper/lib/ReactIdSwiper.custom' ; import 'swiper/swiper-bundle.css' ; import { View } from 'react-native' ; import { CarouselProps } from './CarouselProps' ; import { Navigation , Pagination , Swiper } from 'swiper/swiper.esm' ; let SWIPER_ID = 0 ; export class Carousel extends Component < CarouselProps > { id : number ; constructor ( props ) { super ( props ) ; this . id = SWIPER_ID ++ ; } render ( ) { const { height , style , children , webOptions , webPaddingBottom , showsPagination , loop , currentPageIndicatorColor , pageIndicatorColor } = this . props ; const _showsPagination = typeof showsPagination === 'undefined' ? true : showsPagination ; const _children = children ; return ( < View style = { style } > < div id = { `web-swiper-${ this . id }` } > < ReactIdSwiper loop = { loop } Swiper = { Swiper } modules = { [ Navigation , Pagination ] } pagination = { _showsPagination ? { el : `.swiper-pagination` , clickable : true } : { } } { ... webOptions } > { React . Children . map ( _children , ( child , i ) => { return ( < div key = { i } style = { { height } } > { child } < /div>); } ) } < /ReactIdSwiper> < /div> { } { currentPageIndicatorColor && ( < style > { `#web-swiper-${ this . id }
             .swiper-pagination-bullet.swiper-pagination-bullet-active {
                background-color: ${ currentPageIndicatorColor } }` } < /style>)} { pageIndicatorColor && ( < style > { `#web-swiper-${ this . id }
            .swiper-pagination-bullet {
              background-color: ${ pageIndicatorColor }; opacity: 1 }` } < /style>)} { webPaddingBottom && ( < style > { `#web-swiper-${ this . id }
            .swiper-wrapper {
              padding-bottom: ${ webPaddingBottom }px }` } < /style>)} < /View>); } }