Breaking News: Grepper is joining You.com. Read the official announcement!

swiper slider adjustment

WAJID answered on September 25, 2022 Popularity 8/10 Helpfulness 1/10

answer swiper slider adjustment

swiper slider adjustment

Comment

-1

import {
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  CardMedia,
  Grid,
  Typography,
} from "@mui/material";
import React from "react";
import Title from "../UI/Title";
import { styled } from "@mui/material/styles";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation,Grid as swiperGrid } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/grid";

const Services = () => {
  const services = [
    {
      title: "Frontend",
      img: "./images/hire-dev-1.png",
      description:
        "A Front-End Developer is responsible for developing new user-facing features, determining the structure and design of web pages.",
    },
    {
      title: "WordPress",
      img: "./images/hire-dev-2.png",
      description:
        "WordPress developers design and implement websites for companies using the WordPress creation tool. They are responsible for both front-end and back-end development",
    },
    {
      title: "E-commerce",
      img: "./images/hire-dev-3.png",
      description:
        "E-commerce associates ensure that online stores are visually appealing, easy to navigate, and furnished with accurate, up-to-date content.",
    },
    {
      title: "Mern Stack",
      img: "./images/bgtransparent.png",
      description:
        "MERN developers are responsible for writing reusable, testable, and efficient code and developing and designing front end web applications.",
    },
  ];

  return (
    <Box>
      <Title title='Services' />
      <Grid container spacing={4} my={5}>
        <Swiper
          slidesPerView={3}
          navigation={true}
          modules={[Navigation,swiperGrid]}
        
          loop={true}
          grid={{rows:1}}
          breakpoints={{
            600: {
              slidesPerView: 1,
              
            },
            900: {
              slidesPerView: 2,
             
            },
            1200: {
              slidesPerView: 3,
              
            },
          }}
          style={{padding:'1rem 0'}}
        >
          {services.map((service) => {
            return (
              <SwiperSlide>
                <Grid
                  item
                  xs={12}
                  sm={6}
                  md={4}
                  container
                  justifyContent='center'
                  // most important style regarding centering item while sliding //
                 style={{maxWidth:'350px', minHeight:'511px', display:'flex', flexBasis:'100%'}}
                >
                  <Card
                    raised
                    sx={{
                      maxWidth: "350px",
                      overflow: "visible",
                      position: "relative",
                      marginTop: "5rem",
                      borderRadius: "20px",
                    }}
                  >
                    <Media component='img' image={service.img}></Media>
                    <CardContent
                      sx={{ paddingTop: "11rem", textAlign: "center" }}
                    >
                      <Typography variant='h4'>{service.title}</Typography>
                      <Typography variant='body1'>
                        {service.description}
                      </Typography>
                    </CardContent>
                    <CardActions>
                      <Button
                        variant='contained'
                        sx={{ margin: "0 auto 10px" }}
                      >
                        Contact
                      </Button>
                    </CardActions>
                  </Card>
                </Grid>
              </SwiperSlide>
            );
          })}
        </Swiper>
      </Grid>
    </Box>
  );
};

Popularity 8/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: adjustment css slider

Link to this answer
Share Copy Link

Contributed on Sep 25 2022

WAJID

0 Answers Avg Quality 2/10

swiper slider adjustment

Contents

More Related Answers

swiper slider adjustment

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.