├── LICENSE
├── README.md
├── images
    ├── movie-01.jpg
    ├── movie-02.jpg
    ├── movie-03.jpg
    ├── movie-04.jpg
    ├── movie-05.jpg
    ├── movie-06.jpg
    ├── movie-07.jpg
    ├── movie-08.jpg
    ├── movie-09.jpg
    ├── movie-10.jpg
    ├── movie-11.jpg
    ├── movie-12.jpg
    ├── movie-13.jpg
    ├── movie-14.jpg
    ├── movie-wide-1.jpg
    ├── movie-wide-2.jpg
    ├── movie-wide-3.jpg
    ├── movie-wide-4.jpg
    └── movie-wide-5.jpg
├── index.html
├── readme-images
    ├── Thumbs.db
    └── desktop.png
├── script.js
├── style-guide.md
└── style.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Sadee
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/pure-js-slider)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/pure-js-slider?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/pure-js-slider?style=social)
 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
 7 |   [![YouTube Video Views](https://img.shields.io/youtube/views/NNQuhOeM0mI?style=social)](https://youtu.be/NNQuhOeM0mI)
 8 | 
 9 |   <br />
10 |   <br />
11 | 
12 |   <h2 align="center">Pure JavaScript Slider</h2>
13 | 
14 |   A fully responsive and functional vanilla js slider, <br />Responsive for all devices, build using HTML, CSS, and vanilla JavaScript.
15 | 
16 |   <a href="https://codewithsadee.github.io/pure-js-slider/"><strong>➥ Live Demo</strong></a>
17 | 
18 | </div>
19 | 
20 | <br />
21 | 
22 | ### Demo Screeshots
23 | 
24 | ![Pure Js Slider Desktop Demo](./readme-images/desktop.png "Desktop Demo")
25 | 
26 | ### Prerequisites
27 | 
28 | Before you begin, ensure you have met the following requirements:
29 | 
30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
31 | 
32 | ### Run Locally
33 | 
34 | To run **pure-js-slider** locally, run this command on your git bash:
35 | 
36 | Linux and macOS:
37 | 
38 | ```bash
39 | sudo git clone https://github.com/codewithsadee/pure-js-slider.git
40 | ```
41 | 
42 | Windows:
43 | 
44 | ```bash
45 | git clone https://github.com/codewithsadee/pure-js-slider.git
46 | ```
47 | 
48 | ### Contact
49 | 
50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
51 | 
52 | ### License
53 | 
54 | This project is **free to use** and does not contains any license.
55 | 


--------------------------------------------------------------------------------
/images/movie-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-01.jpg


--------------------------------------------------------------------------------
/images/movie-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-02.jpg


--------------------------------------------------------------------------------
/images/movie-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-03.jpg


--------------------------------------------------------------------------------
/images/movie-04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-04.jpg


--------------------------------------------------------------------------------
/images/movie-05.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-05.jpg


--------------------------------------------------------------------------------
/images/movie-06.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-06.jpg


--------------------------------------------------------------------------------
/images/movie-07.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-07.jpg


--------------------------------------------------------------------------------
/images/movie-08.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-08.jpg


--------------------------------------------------------------------------------
/images/movie-09.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-09.jpg


--------------------------------------------------------------------------------
/images/movie-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-10.jpg


--------------------------------------------------------------------------------
/images/movie-11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-11.jpg


--------------------------------------------------------------------------------
/images/movie-12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-12.jpg


--------------------------------------------------------------------------------
/images/movie-13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-13.jpg


--------------------------------------------------------------------------------
/images/movie-14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-14.jpg


--------------------------------------------------------------------------------
/images/movie-wide-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-wide-1.jpg


--------------------------------------------------------------------------------
/images/movie-wide-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-wide-2.jpg


--------------------------------------------------------------------------------
/images/movie-wide-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-wide-3.jpg


--------------------------------------------------------------------------------
/images/movie-wide-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-wide-4.jpg


--------------------------------------------------------------------------------
/images/movie-wide-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/images/movie-wide-5.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 
  9 |   <title>Pure JavaScript Slider</title>
 10 | 
 11 |   <!-- 
 12 |     - custom js link
 13 |   -->
 14 |   <link rel="stylesheet" href="./style.css">
 15 | 
 16 | </head>
 17 | 
 18 | <body>
 19 | 
 20 |   <div class="container">
 21 | 
 22 |     <div class="slider banner-slider" data-slider>
 23 | 
 24 |       <div class="slider-container" data-slider-container>
 25 | 
 26 |         <div class="slider-item">
 27 |           <div class="card img-holder" style="--width: 1000; --height: 560;">
 28 |             <img src="./images/movie-wide-1.jpg" width="1000" height="560" alt="" class="img-cover">
 29 |           </div>
 30 |         </div>
 31 | 
 32 |         <div class="slider-item">
 33 |           <div class="card img-holder" style="--width: 1000; --height: 560;">
 34 |             <img src="./images/movie-wide-2.jpg" width="1000" height="560" alt="" class="img-cover">
 35 |           </div>
 36 |         </div>
 37 | 
 38 |         <div class="slider-item">
 39 |           <div class="card img-holder" style="--width: 1000; --height: 560;">
 40 |             <img src="./images/movie-wide-3.jpg" width="1000" height="560" alt="" class="img-cover">
 41 |           </div>
 42 |         </div>
 43 | 
 44 |         <div class="slider-item">
 45 |           <div class="card img-holder" style="--width: 1000; --height: 560;">
 46 |             <img src="./images/movie-wide-4.jpg" width="1000" height="560" alt="" class="img-cover">
 47 |           </div>
 48 |         </div>
 49 | 
 50 |         <div class="slider-item">
 51 |           <div class="card img-holder" style="--width: 1000; --height: 560;">
 52 |             <img src="./images/movie-wide-5.jpg" width="1000" height="560" alt="" class="img-cover">
 53 |           </div>
 54 |         </div>
 55 | 
 56 |       </div>
 57 | 
 58 |       <button class="btn-icon slider-control prev" data-slider-prev>
 59 |         <ion-icon name="arrow-back-sharp"></ion-icon>
 60 |       </button>
 61 | 
 62 |       <button class="btn-icon slider-control next" data-slider-next>
 63 |         <ion-icon name="arrow-forward-sharp"></ion-icon>
 64 |       </button>
 65 | 
 66 |     </div>
 67 | 
 68 |     <div class="slider card-slider" data-slider>
 69 | 
 70 |       <div class="slider-container" data-slider-container>
 71 | 
 72 |         <div class="slider-item">
 73 |           <div class="card img-holder" style="--width: 500; --height: 750;">
 74 |             <img src="./images/movie-01.jpg" width="500" height="750" alt="" class="img-cover">
 75 |           </div>
 76 |         </div>
 77 | 
 78 |         <div class="slider-item">
 79 |           <div class="card img-holder" style="--width: 500; --height: 750;">
 80 |             <img src="./images/movie-02.jpg" width="500" height="750" alt="" class="img-cover">
 81 |           </div>
 82 |         </div>
 83 | 
 84 |         <div class="slider-item">
 85 |           <div class="card img-holder" style="--width: 500; --height: 750;">
 86 |             <img src="./images/movie-03.jpg" width="500" height="750" alt="" class="img-cover">
 87 |           </div>
 88 |         </div>
 89 | 
 90 |         <div class="slider-item">
 91 |           <div class="card img-holder" style="--width: 500; --height: 750;">
 92 |             <img src="./images/movie-04.jpg" width="500" height="750" alt="" class="img-cover">
 93 |           </div>
 94 |         </div>
 95 | 
 96 |         <div class="slider-item">
 97 |           <div class="card img-holder" style="--width: 500; --height: 750;">
 98 |             <img src="./images/movie-05.jpg" width="500" height="750" alt="" class="img-cover">
 99 |           </div>
100 |         </div>
101 | 
102 |         <div class="slider-item">
103 |           <div class="card img-holder" style="--width: 500; --height: 750;">
104 |             <img src="./images/movie-06.jpg" width="500" height="750" alt="" class="img-cover">
105 |           </div>
106 |         </div>
107 | 
108 |       </div>
109 | 
110 |       <button class="btn-icon slider-control prev" data-slider-prev>
111 |         <ion-icon name="arrow-back-sharp"></ion-icon>
112 |       </button>
113 | 
114 |       <button class="btn-icon slider-control next" data-slider-next>
115 |         <ion-icon name="arrow-forward-sharp"></ion-icon>
116 |       </button>
117 | 
118 |     </div>
119 | 
120 |     <div class="slider card-slider" data-slider>
121 | 
122 |       <div class="slider-container" data-slider-container>
123 | 
124 |         <div class="slider-item">
125 |           <div class="card img-holder" style="--width: 500; --height: 750;">
126 |             <img src="./images/movie-07.jpg" width="500" height="750" alt="" class="img-cover">
127 |           </div>
128 |         </div>
129 | 
130 |         <div class="slider-item">
131 |           <div class="card img-holder" style="--width: 500; --height: 750;">
132 |             <img src="./images/movie-08.jpg" width="500" height="750" alt="" class="img-cover">
133 |           </div>
134 |         </div>
135 | 
136 |         <div class="slider-item">
137 |           <div class="card img-holder" style="--width: 500; --height: 750;">
138 |             <img src="./images/movie-09.jpg" width="500" height="750" alt="" class="img-cover">
139 |           </div>
140 |         </div>
141 | 
142 |         <div class="slider-item">
143 |           <div class="card img-holder" style="--width: 500; --height: 750;">
144 |             <img src="./images/movie-10.jpg" width="500" height="750" alt="" class="img-cover">
145 |           </div>
146 |         </div>
147 | 
148 |         <div class="slider-item">
149 |           <div class="card img-holder" style="--width: 500; --height: 750;">
150 |             <img src="./images/movie-11.jpg" width="500" height="750" alt="" class="img-cover">
151 |           </div>
152 |         </div>
153 | 
154 |       </div>
155 | 
156 |       <button class="btn-icon slider-control prev" data-slider-prev>
157 |         <ion-icon name="arrow-back-sharp"></ion-icon>
158 |       </button>
159 | 
160 |       <button class="btn-icon slider-control next" data-slider-next>
161 |         <ion-icon name="arrow-forward-sharp"></ion-icon>
162 |       </button>
163 | 
164 |     </div>
165 | 
166 |     <div class="slider card-slider" data-slider>
167 | 
168 |       <div class="slider-container" data-slider-container>
169 | 
170 |         <div class="slider-item">
171 |           <div class="card img-holder" style="--width: 500; --height: 750;">
172 |             <img src="./images/movie-12.jpg" width="500" height="750" alt="" class="img-cover">
173 |           </div>
174 |         </div>
175 | 
176 |         <div class="slider-item">
177 |           <div class="card img-holder" style="--width: 500; --height: 750;">
178 |             <img src="./images/movie-13.jpg" width="500" height="750" alt="" class="img-cover">
179 |           </div>
180 |         </div>
181 | 
182 |         <div class="slider-item">
183 |           <div class="card img-holder" style="--width: 500; --height: 750;">
184 |             <img src="./images/movie-14.jpg" width="500" height="750" alt="" class="img-cover">
185 |           </div>
186 |         </div>
187 | 
188 |       </div>
189 | 
190 |       <button class="btn-icon slider-control prev" data-slider-prev>
191 |         <ion-icon name="arrow-back-sharp"></ion-icon>
192 |       </button>
193 | 
194 |       <button class="btn-icon slider-control next" data-slider-next>
195 |         <ion-icon name="arrow-forward-sharp"></ion-icon>
196 |       </button>
197 | 
198 |     </div>
199 | 
200 |   </div>
201 | 
202 | 
203 | 
204 | 
205 | 
206 |   <!-- 
207 |     - custom js link
208 |   -->
209 |   <script src="./script.js"></script>
210 | 
211 |   <!-- 
212 |     - ionicon
213 |   -->
214 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
215 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
216 | 
217 | </body>
218 | 
219 | </html>


--------------------------------------------------------------------------------
/readme-images/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/readme-images/Thumbs.db


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/pure-js-slider/c850e1911b76a1f10f1ba3153eda99fbb27a9697/readme-images/desktop.png


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | 
 5 | const sliders = document.querySelectorAll("[data-slider]");
 6 | 
 7 | const sliderInit = function (currentSlider) {
 8 | 
 9 |   const sliderContainer = currentSlider.querySelector("[data-slider-container]");
10 |   const sliderPrevBtn = currentSlider.querySelector("[data-slider-prev]");
11 |   const sliderNextBtn = currentSlider.querySelector("[data-slider-next]");
12 | 
13 |   const totalSliderVisibleItems = Number(getComputedStyle(currentSlider).getPropertyValue("--slider-items"));
14 | 
15 |   const totalSliderItems = sliderContainer.childElementCount - totalSliderVisibleItems;
16 | 
17 |   let currentSlidePos = 0;
18 | 
19 |   /**
20 |    * NEXT SLIDE
21 |    */
22 |   const slideNext = function () {
23 | 
24 |     currentSlidePos++;
25 | 
26 |     sliderContainer.style.transform = `translateX(-${sliderContainer.children[currentSlidePos].offsetLeft}px)`;
27 | 
28 |     if (currentSlidePos >= totalSliderItems) sliderNextBtn.setAttribute("disabled", "");
29 |     sliderPrevBtn.removeAttribute("disabled");
30 | 
31 |   }
32 | 
33 |   sliderNextBtn.addEventListener("click", slideNext);
34 | 
35 |   /**
36 |    * PREVIOUS SLIDE
37 |    */
38 |   const slidePrev = function () {
39 | 
40 |     currentSlidePos--;
41 | 
42 |     sliderContainer.style.transform = `translateX(-${sliderContainer.children[currentSlidePos].offsetLeft}px)`;
43 | 
44 |     if (currentSlidePos <= 0) sliderPrevBtn.setAttribute("disabled", "");
45 |     sliderNextBtn.removeAttribute("disabled");
46 | 
47 |   }
48 | 
49 |   sliderPrevBtn.addEventListener("click", slidePrev);
50 | 
51 |   const dontHaveExtraItem = totalSliderItems <= 0;
52 |   if (dontHaveExtraItem) sliderNextBtn.setAttribute("disabled", "");
53 | 
54 |   sliderPrevBtn.setAttribute("disabled", "");
55 | 
56 | }
57 | 
58 | for (let i = 0, len = sliders.length; i < len; i++) { sliderInit(sliders[i]); }


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Essential Stuff
 2 | 
 3 | ## Html import links
 4 | 
 5 | Ionicon
 6 | 
 7 | ``` html
 8 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 9 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
10 | ```
11 | 
12 | ---
13 | 
14 | ## Colors
15 | 
16 | ``` css
17 | --background: hsl(210, 7%, 11%);
18 | --surface-variant: hsl(218, 8%, 28%);
19 | --secondary-container: hsl(218, 18%, 29%);
20 | --on-secondary-container: hsl(219, 70%, 91%);
21 | ```
22 | 
23 | ## Border Radius
24 | 
25 | ``` css
26 | --radius-full: 50%;
27 | --radius-12: 12px;
28 | ```
29 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #style.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | /*-----------------------------------*\
 14 |   #CUSTOM PROPERTY
 15 | \*-----------------------------------*/
 16 | 
 17 | :root {
 18 | 
 19 |   /**
 20 |    * colors
 21 |    */
 22 | 
 23 |   --background: hsl(210, 7%, 11%);
 24 |   --surface-variant: hsl(218, 8%, 28%);
 25 |   --secondary-container: hsl(218, 18%, 29%);
 26 |   --on-secondary-container: hsl(219, 70%, 91%);
 27 | 
 28 |   /**
 29 |    * border radius
 30 |    */
 31 | 
 32 |   --radius-full: 50%;
 33 |   --radius-12: 12px;
 34 | 
 35 | }
 36 | 
 37 | 
 38 | 
 39 | 
 40 | 
 41 | /*-----------------------------------*\
 42 |   #RESET
 43 | \*-----------------------------------*/
 44 | 
 45 | *,
 46 | *::before,
 47 | *::after {
 48 |   margin: 0;
 49 |   padding: 0;
 50 |   box-sizing: border-box;
 51 | }
 52 | 
 53 | img,
 54 | button,
 55 | ion-icon { display: block; }
 56 | 
 57 | img {
 58 |   height: auto;
 59 |   user-select: none;
 60 | }
 61 | 
 62 | button {
 63 |   background: none;
 64 |   border: none;
 65 |   font: inherit;
 66 |   cursor: pointer;
 67 | }
 68 | 
 69 | html {
 70 |   font-size: 62.5%;
 71 |   scroll-behavior: smooth;
 72 | }
 73 | 
 74 | body {
 75 |   background-color: var(--background);
 76 |   font-size: 1.6rem;
 77 |   padding-block: 48px;
 78 |   overflow-y: overlay;
 79 | }
 80 | 
 81 | ::-webkit-scrollbar { width: 6px; }
 82 | 
 83 | ::-webkit-scrollbar-track { background-color: transparent; }
 84 | 
 85 | ::-webkit-scrollbar-thumb {
 86 |   background-color: transparent;
 87 |   border-radius: 8px;
 88 | }
 89 | 
 90 | body:is(:hover, :focus-visible)::-webkit-scrollbar-thumb {
 91 |   background-color: var(--surface-variant);
 92 | }
 93 | 
 94 | 
 95 | 
 96 | 
 97 | 
 98 | /*-----------------------------------*\
 99 |   #MAIN
100 | \*-----------------------------------*/
101 | 
102 | .container {
103 |   padding-inline: 8px;
104 |   display: grid;
105 |   gap: 24px;
106 | }
107 | 
108 | .slider {
109 |   --slider-items: 1; /* mandatory for slider */
110 | 
111 |   position: relative;
112 |   width: 100%;
113 |   padding-inline: 16px;
114 |   overflow-x: hidden;
115 | }
116 | 
117 | .slider::before,
118 | .slider::after {
119 |   content: "";
120 |   position: absolute;
121 |   top: 0;
122 |   width: 24px;
123 |   height: 100%;
124 |   z-index: 1;
125 |   background-image: linear-gradient(to var(--gr-direction, right),
126 |                       var(--background) 0%, transparent 100%);
127 | }
128 | 
129 | .slider::before { left: 0; }
130 | 
131 | .slider::after {
132 |   right: 0;
133 |   --gr-direction: left;
134 | }
135 | 
136 | .slider-container {
137 |   position: relative; /* mandatory for slider */
138 |   display: flex;
139 |   justify-content: flex-start;
140 |   transition: transform 250ms ease;
141 | }
142 | 
143 | .slider-item {
144 |   min-width: calc(100% / var(--slider-items));
145 |   width: calc(100% / var(--slider-items));
146 |   padding-inline: 4px;
147 | }
148 | 
149 | .card {
150 |   background-color: var(--surface-variant);
151 |   border-radius: var(--radius-12);
152 |   overflow: hidden;
153 | }
154 | 
155 | .img-holder { aspect-ratio: var(--width) / var(--height); }
156 | 
157 | .img-cover {
158 |   width: 100%;
159 |   height: 100%;
160 |   object-fit: cover;
161 | }
162 | 
163 | .btn-icon {
164 |   width: 40px;
165 |   height: 40px;
166 |   background-color: var(--secondary-container);
167 |   color: var(--on-secondary-container);
168 |   font-size: 2.4rem;
169 |   display: grid;
170 |   place-items: center;
171 |   border-radius: var(--radius-full);
172 |   box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.5);
173 | }
174 | 
175 | .slider-control {
176 |   position: absolute;
177 |   top: 50%;
178 |   transform: translateY(-50%);
179 |   z-index: 2;
180 | }
181 | 
182 | .slider-control.prev { left: 0; }
183 | 
184 | .slider-control.next { right: 0; }
185 | 
186 | .slider-control:disabled { display: none; }
187 | 
188 | 
189 | 
190 | 
191 | 
192 | /*-----------------------------------*\
193 |   #MEDIA QUERIES
194 | \*-----------------------------------*/
195 | 
196 | /**
197 |  * responsive for large than 567px screen
198 |  */
199 | 
200 | @media (min-width: 567px) {
201 | 
202 |   .container {
203 |     max-width: 480px;
204 |     width: 100%;
205 |     margin-inline: auto;
206 |   }
207 | 
208 |   .card-slider { --slider-items: 2; }
209 | 
210 | }
211 | 
212 | 
213 | 
214 | 
215 | 
216 | /**
217 |  * responsive for large than 768px screen
218 |  */
219 | 
220 | @media (min-width: 768px) {
221 | 
222 |   .container { max-width: 720px; }
223 | 
224 |   .card-slider { --slider-items: 3; }
225 | 
226 | }
227 | 
228 | 
229 | 
230 | 
231 | 
232 | /**
233 |  * responsive for large than 992px screen
234 |  */
235 | 
236 | @media (min-width: 992px) {
237 | 
238 |   .container { max-width: 960px; }
239 | 
240 |   .card-slider { --slider-items: 4; }
241 | 
242 | }
243 | 
244 | 
245 | 
246 | 
247 | 
248 | /**
249 |  * responsive for large than 1200px screen
250 |  */
251 | 
252 | @media (min-width: 1200px) {
253 | 
254 |   .container { max-width: 1150px; }
255 | 
256 |   .banner-slider { --slider-items: 2; }
257 | 
258 |   .card-slider { --slider-items: 5; }
259 | 
260 | }
261 | 
262 | 
263 | 
264 | 
265 | 
266 | /**
267 |  * responsive for large than 1400px screen
268 |  */
269 | 
270 | @media (min-width: 1400px) {
271 | 
272 |   .container { max-width: 1400px; }
273 | 
274 | }


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