Search code examples
javascripthtmlcssslidercarousel

How can approach to build a carousel component with this layout

`I am trying to build a static HTML CSS website and trying to add slider functionality via js. Please advise on how to approach

layout

I tried following the tutorials they were either not compatible with my layout or using Swiper JS.

I tried swiper js had a hard time styling its components, especially the position and colors, and other stuff.

      <section class="section-customers wrapper">
        <div class="container caraseoul">
  

          <div class="slide">
            <img
              src="./images/customers/ryan-hoffman.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Ryan Hoffman</p>
              <p class="testimonial-status">
                <span>30 </span>kgs lost in 7 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/alexander.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Alexander Hamilton</p>
              <p class="testimonial-status">
                <span>10 </span>kgs lost in 2 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <div class="slide">
            <img
              src="./images/customers/edward.jpg"
              alt="alexander"
              class="customer-img"
            />
            <blockquote class="testimonial">
              <p class="testimonial-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
                excepturi sint sequi laborum, nostru,excepturi sint sequi
                laborum, nostru,excepturi sint sequi laborum, nostru
              </p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status">
                <span>23 </span>kgs lost in 6 months
              </p>
            </blockquote>
          </div>
          <button class="slider-btn slider-btn-right">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="btn-icon"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M8.25 4.5l7.5 7.5-7.5 7.5"
              />
            </svg>
          </button>
          <button class="slider-btn slider-btn-left">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="btn-icon"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.75 19.5L8.25 12l7.5-7.5"
              />
            </svg>
          </button>
        </div>
      </section>```



```
/* TESTIMONIAL SECTION  CSS*/
.section-customers {
  padding: 9.6rem 0;
  background-color: #fed2d2;
}

.customer-img {
  max-width: 100%;
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.caraseoul {
  display: flex;
  gap: 4.8rem;
  position: relative;
}

.testimonial {
  color: black;
}

.slide {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 0;
  background-color: white;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.testimonial-text {
  font-size: 1.2rem;
  margin: 2rem;
  margin-top: auto;
}

.testimonial-author {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0.6rem;
  color: navy;
}

.testimonial-status {
  font-size: 1.8rem;
}

.testimonial-status span {
  color: #a12222;
  font-weight: 600;
}

.slider-btn {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  border: none;
}

.btn-icon {
  height: 2.4rem;
  width: 2.4rem;
  stroke: #a12222;
}

.slider-btn-left {
  left: -5%;
  top: 50%;
  transform: translate(0, -50%);
}
.slider-btn-right {
  right: -10%;
  top: 50%;
  transform: translate(0, -50%);
}

```

`
Solution

  • Hello captainofthe9thdivision,

    You don't need anything else what you need to use is SLICK-SLIDER. It's best and easy library to make slider/carousel with less time. In the solution, I just integrated slick slider using CDN and tried to make something like you wanted to make.

    If you're uses slick-slider then you needs to add following files:

    1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    And add jQuery before slick.js

    Then you have to add following script to use :

    $('.className').slick({
dots: true, // for bottom dots
arrows: true, // for right/left arrow buttons
infinite: true, // whether you want too make loop infinite or not
loop: true, // for the loop
swipe: true, // slide using swipe 
autoplay: true, // want to slide automatic
autoplaySpeed: 2000, // autoplay slide after 2000 seconds
slidesToShow: 6, // how many slides to be displayed in screen
slidesToScroll: 3, // how many slides will be swipe/scrolled/slides
responsive: [ // this is for the responsive
 {
   breakpoint: 1400, // below 1400px screen resolution following settings will be applied
   settings: {
     slidesToShow: 5,
     slidesToScroll: 2
   }
]
});

    If you want to know more about Slick slider then click on below link: https://kenwheeler.github.io/slick/

    please refer this link for live demo to understand in details. https://jsfiddle.net/qn6urw0o/8/

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Carousel</title>
  <!-- slick.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <!-- custom style -->
  <style>
    .section-customers {
      padding: 9.6rem 0;
      background-color: #fed2d2;
    }
    
    .customer-img {
      height: 10rem;
      width: 10rem;
      max-width: 100%;
      border-radius: 50%;
      box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    }
    
    .caraseoul {
      display: flex;
      gap: 4.8rem;
      position: relative;
    }
    
    .testimonial {
      color: black;
    }
    
    .slide {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5rem 0;
      background-color: white;
      border-radius: 6px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      margin: 1rem;
    }
    
    .testimonial-text {
      font-size: 1.2rem;
      margin: 2rem;
      margin-top: auto;
    }
    
    .testimonial-author {
      font-size: 2rem;
      font-weight: 400;
      margin-bottom: 0.6rem;
      color: navy;
    }
    
    .testimonial-status {
      font-size: 1.8rem;
    }
    
    .testimonial-status span {
      color: #a12222;
      font-weight: 600;
    }
    
    .slick-next,
    .slick-prev {
      border-radius: 50%;
      color: #a12222;
      z-index: 99999999999;
      width: max-content;
      height: max-content;
    }
    
    .slick-next {
      right: 20px;
    }
    
    .slick-prev {
      left: 20px;
    }
    
    .slick-next:before,
    .slick-prev:before {
      width: 50px;
      height: 50px;
      display: block;
      border-radius: 50%;
      background-color: #fff;
      font-size: 50px;
      background-color: #a12222;
    }
    
    .slick-next::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>');
      stroke: #a12222;
      color: #a12222;
    }
    
    .slick-prev::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-icon"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>');
      stroke: #a12222;
      color: #a12222;
    }
  </style>

</head>

<body>
  <section class="section-customers wrapper">
    <div class="container">
      <div class="caraseoul">
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>30 </span>kgs lost in 7 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/RLdcScGQEJ4" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>10 </span>kgs lost in 2 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/RLdcScGQEJ4" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>30 </span>kgs lost in 7 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">A Joshi</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">R Makwana</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/mEZ3PoFGs_k" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/X-Z9gHq6iow" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"><span>30 </span>kgs lost in 7 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/ZHvM3XIOHoE" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">P Kamble</p>
              <p class="testimonial-status"><span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
        <div class="slider-wrapper">
          <div class="slide">
            <img src="https://source.unsplash.com/mEZ3PoFGs_k" alt="alexander" class="customer-img" />
            <blockquote class="testimonial">
              <p class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione excepturi sint sequi laborum, nostru,excepturi sint sequi laborum,nostru,excepturi sint sequi laborum, nostru</p>
              <p class="testimonial-author">Cristina Niosi</p>
              <p class="testimonial-status"> <span>23 </span>kgs lost in 6 months</p>
            </blockquote>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
  <!-- slick.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $('.caraseoul').slick({
      dots: true,
      arrows: true,
      infinite: true,
      loop: true,
      speed: 1000,
      swipe: true,
      autoplay: true,
      autoplaySpeed: 2000,
      slidesToShow: 6,
      slidesToScroll: 3,
      responsive: [{
          breakpoint: 1400,
          settings: {
            slidesToShow: 5,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 1300,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 1100,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 800,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 600,
          settings: {
            fade: true,
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  </script>

</body>

</html>