import styled from 'styled-components'
import '../style/common.css'
import {rem} from '../style/function.style'

export const Container = styled.div`
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    .slider-container {
      overflow: hidden;
    }
    .slider {
      position: relative;
      margin: 0;
      overflow: hidden;
      list-style: none;
      li{
        position: relative;
        float: left;
        width: 100%;
        height: 100%;
      }
      .slider-image {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .index{
      position: absolute;
      bottom: ${rem(40)};
      left: 50%;
      transform: translateX(-50%);
      .item{
        display: inline-block;
        width: ${rem(12)};
        height: ${rem(12)};
        border-radius: 100%;
        margin-right: ${rem(16)};
        background: rgba(255, 255, 255, .3);
        &:last-of-type{
          margin-right: 0;
        }
        &.current{
          background: #fff;
        }
      }
    }
    /* ul li img {
      display:block;
      width: 100%;
      height: 100%;
    } */
`