123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- import React from "react";
- import { Carousel} from "react-bootstrap";
- import styled from "styled-components";
- import firstSlide from '../img/wheel_of_high.jpg'
- import secondSlide from '../img/stalker_header_2.jpg'
- import thirdSlide from '../img/stalker_header.jpg'
- const Styled = styled.div`
- .carousel-item{
- height: 600px;
- }
- .carousel-caption {
- font-family: Stalker;
- font-size: 1.4rem;
- }
- @media (min-width: 768px) {
- .carousel-item{
- height: 400px;
- }
-
- }
- @media (max-width: 576px) {
- .carousel-item {
- height:100%;
- }
- }
-
- `;
- export default function Slider() {
- return(
- <>
- <Styled>
- <Carousel fade>
-
- <Carousel.Item>
- <img
- className="d-block w-100"
- src={firstSlide}
- alt="First slide"
- />
- <Carousel.Caption>
- <h3>First slide label</h3>
- <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
- </Carousel.Caption>
- </Carousel.Item>
- <Carousel.Item>
- <img
- className="d-block w-100"
- src={secondSlide}
- alt="Second slide"
- />
- <Carousel.Caption>
- <h3>Second slide label</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
- </Carousel.Caption>
- </Carousel.Item>
- <Carousel.Item>
- <img
- className="d-block w-100"
- src={thirdSlide}
- alt="Third slide"
- />
- <Carousel.Caption>
- <h3>Third slide label</h3>
- <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
- </Carousel.Caption>
- </Carousel.Item>
- </Carousel>
- </Styled>
- </>
- );
- }
|