├── Miniatura.png
├── README.md
├── css
    └── styles.css
├── images
    ├── user1.jpg
    ├── user2.jpg
    ├── user3.jpg
    └── user4.jpg
└── index.html


/Miniatura.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devmode-on/Card-Slider/41e84cada550b781309258187f1bbce9ac3c9afe/Miniatura.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Card-Slider
2 | Card Slider Using HTML CSS & Swiper.js
3 | 
4 | ![Screenshot](Miniatura.png)
5 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* ------------ GOOGLE FONTS ------------ */
  2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
  3 | 
  4 | /* ------------ VARIABLES ------------ */
  5 | :root{
  6 |   /* FONT */
  7 |   --font: 'Poppins', sans-serif;
  8 | 
  9 |   /* COLORS */
 10 |   --color: #9176FF;
 11 |   --bg-color: #f4f4f4;
 12 | }
 13 | 
 14 | /* ------------ BASE ------------ */
 15 | *{
 16 |   margin: 0;
 17 |   padding: 0;
 18 |   box-sizing: border-box;
 19 | }
 20 | 
 21 | body{
 22 |   font-family: var(--font);
 23 |   display: flex;
 24 |   justify-content: center;
 25 |   align-items: center;
 26 |   height: 100vh;
 27 | 
 28 |   background-color: var(--bg-color);
 29 | }
 30 | 
 31 | /* ----------- SLIDER ------------ */
 32 | .swiper{
 33 |   width: 100%;
 34 | }
 35 | 
 36 | .swiper-wrapper{
 37 |   width: 100%;
 38 |   height: 35em;
 39 |   display: flex;
 40 |   align-items: center;
 41 | }
 42 | 
 43 | .card{
 44 |   width: 20em;
 45 |   height: 90%;
 46 |   background-color: #fff;
 47 |   border-radius: 2em;
 48 |   box-shadow: 0 0 2em rgba(0, 0, 0, .2);
 49 |   padding: 2em 1em;
 50 | 
 51 |   display: flex;
 52 |   align-items: center;
 53 |   flex-direction: column;
 54 | 
 55 |   margin: 0 2em;
 56 | }
 57 | 
 58 | .swiper-slide:not(.swiper-slide-active){
 59 |   filter: blur(1px);
 60 | }
 61 | 
 62 | .card__image{
 63 |   width: 10em;
 64 |   height: 10em;
 65 |   border-radius: 50%;
 66 |   border: 5px solid var(--color);
 67 |   padding: 3px;
 68 |   margin-bottom: 2em;
 69 | }
 70 | 
 71 | .card__image img{
 72 |   width: 100%;
 73 |   height: 100%;
 74 |   border-radius: 50%;
 75 |   object-fit: cover;
 76 | }
 77 | 
 78 | .card__content{
 79 |   display: flex;
 80 |   align-items: center;
 81 |   flex-direction: column;
 82 | }
 83 | 
 84 | .card__title{
 85 |   font-size: 1.5rem;
 86 |   font-weight: 500;
 87 |   position: relative;
 88 |   top: .2em;
 89 | }
 90 | 
 91 | .card__name{
 92 |   color: var(--color);
 93 | }
 94 | 
 95 | .card__text{
 96 |   text-align: center;
 97 |   font-size: 1.1rem;
 98 |   margin: 1em 0;
 99 | }
100 | 
101 | .card__btn{
102 |   background-color: var(--color);
103 |   color: #fff;
104 |   font-size: 1rem;
105 |   text-transform: uppercase;
106 |   font-weight: 600;
107 |   border: none;
108 |   padding: .5em;
109 |   border-radius: .5em;
110 |   margin-top: .5em;
111 |   cursor: pointer;
112 | }


--------------------------------------------------------------------------------
/images/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devmode-on/Card-Slider/41e84cada550b781309258187f1bbce9ac3c9afe/images/user1.jpg


--------------------------------------------------------------------------------
/images/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devmode-on/Card-Slider/41e84cada550b781309258187f1bbce9ac3c9afe/images/user2.jpg


--------------------------------------------------------------------------------
/images/user3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devmode-on/Card-Slider/41e84cada550b781309258187f1bbce9ac3c9afe/images/user3.jpg


--------------------------------------------------------------------------------
/images/user4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devmode-on/Card-Slider/41e84cada550b781309258187f1bbce9ac3c9afe/images/user4.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Card Slider |Dev Mode</title>
  8 | 
  9 |     <!-- Link Swiper's CSS -->
 10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
 11 | 
 12 |     <!-- CSS -->
 13 |     <link rel="stylesheet" href="css/styles.css">
 14 |     
 15 | </head>
 16 | <body>
 17 | 
 18 |   <section class="swiper mySwiper">
 19 | 
 20 |     <div class="swiper-wrapper">
 21 | 
 22 |       <div class="card swiper-slide">
 23 |         <div class="card__image">
 24 |           <img src="/images/user1.jpg" alt="card image">
 25 |         </div>
 26 | 
 27 |         <div class="card__content">
 28 |           <span class="card__title">Web Designer</span>
 29 |           <span class="card__name">Vanessa Martinez</span>
 30 |           <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit veritatis labore provident non tempora odio est sunt, ipsum</p>
 31 |           <button class="card__btn">View More</button>
 32 |         </div>
 33 |       </div>
 34 | 
 35 |       <div class="card swiper-slide">
 36 |         <div class="card__image">
 37 |           <img src="/images/user2.jpg" alt="card image">
 38 |         </div>
 39 | 
 40 |         <div class="card__content">
 41 |           <span class="card__title">Ui Designer</span>
 42 |           <span class="card__name">Sarah Bowen</span>
 43 |           <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit veritatis labore provident non tempora odio est sunt, ipsum</p>
 44 |           <button class="card__btn">View More</button>
 45 |         </div>
 46 |       </div>
 47 | 
 48 |       <div class="card swiper-slide">
 49 |         <div class="card__image">
 50 |           <img src="/images/user3.jpg" alt="card image">
 51 |         </div>
 52 | 
 53 |         <div class="card__content">
 54 |           <span class="card__title">Web Developer</span>
 55 |           <span class="card__name">David Murphy</span>
 56 |           <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit veritatis labore provident non tempora odio est sunt, ipsum</p>
 57 |           <button class="card__btn">View More</button>
 58 |         </div>
 59 |       </div>
 60 | 
 61 |       <div class="card swiper-slide">
 62 |         <div class="card__image">
 63 |           <img src="/images/user4.jpg" alt="card image">
 64 |         </div>
 65 | 
 66 |         <div class="card__content">
 67 |           <span class="card__title">Mobile Designer</span>
 68 |           <span class="card__name">Kelsey West</span>
 69 |           <p class="card__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit veritatis labore provident non tempora odio est sunt, ipsum</p>
 70 |           <button class="card__btn">View More</button>
 71 |         </div>
 72 |       </div>
 73 | 
 74 |     </div>
 75 |   </section>
 76 | 
 77 | <!-- Swiper JS -->
 78 |   <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 79 | 
 80 |   <!-- Initialize Swiper -->
 81 |   <script>
 82 |     var swiper = new Swiper(".mySwiper", {
 83 |       effect: "coverflow",
 84 |       grabCursor: true,
 85 |       centeredSlides: true,
 86 |       slidesPerView: "auto",
 87 |       coverflowEffect: {
 88 |         rotate: 0,
 89 |         stretch: 0,
 90 |         depth: 300,
 91 |         modifier: 1,
 92 |         slideShadows: false,
 93 |       },
 94 |       pagination: {
 95 |         el: ".swiper-pagination",
 96 |       },
 97 |     });
 98 |   </script>
 99 | 
100 | </body>
101 | </html>


--------------------------------------------------------------------------------