What is the best way to create a carousel component with this particular design?

`I want to enhance my static HTML CSS website by incorporating a slider feature using JavaScript. Looking for guidance on the best approach.

Here is the layout.

I've attempted various tutorials but they weren't compatible with my layout or relied on Swiper JS.

When using Swiper JS, I encountered difficulties in styling the components, particularly with positioning, colors, and other aspects.

      <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>
          (more slides ...)
          <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>




/* CUSTOM 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;
}

/* Styles for slides, testimonial text, author, status, and buttons */



`

Answer №1

Hello esteemed visitor,

If you're looking to create a slider/carousel with ease and efficiency, the best option for you is the SLICK-SLIDER library. By integrating slick slider using CDN, you can quickly achieve the desired slider/carousel functionality.

To use slick-slider, you will need to include the 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>

Make sure to add jQuery before including slick.js in your project.

After adding these files, you can utilize the following script to initialize the slider:

$('.className').slick({
dots: true,
arrows: true,
infinite: true,
loop: true,
swipe: true,
autoplay: true,
autoplaySpeed: 2000,
slidesToShow: 6,
slidesToScroll: 3,
responsive: [
 {
   breakpoint: 1400,
   settings: {
     slidesToShow: 5,
     slidesToScroll: 2
   }
]
});

For more information on Slick slider, you can visit the following link:

Feel free to check out this live demo link for a detailed understanding: https://jsfiddle.net/qn6urw0o/8/

<!DOCTYPE html>
<html lang="en">
<!-- More HTML code for the carousel/slider goes here -->
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying the overall count for a bar chart within the tooltip title of a c3js visualization

I have a bar chart that looks similar to the one presented in this example. There are two specific features I am interested in adding to this bar chart: Instead of numeric values, I would like the tooltip title to show the sum of the counts represente ...

Saving data values for utilization in jQuery

Recently, I've come across a series of links structured like this: <a class="colorBox" href="#" title="#0676B3"></a> <a ... <a ... these links all have color values in the title attribute <a ... What I'm trying to do is uti ...

Changing the border color in a CSS pseudo-class does not take effect upon clicking

Is it possible to change the border color of an input field when clicked using CSS? I attempted to use the pseudo-class focus for this purpose, but encountered some issues. It seems to only work on select elements and not on elements like text inputs. . ...

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script

I've encountered an issue while posting a form to a PHP file using AJAX. Despite my efforts, the form is bypassing AJAX and posting directly to the PHP file. Here is my form: <form id="editform" name="editform" action="ajaxeditform.php" method= ...

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

Guide on displaying gallery images when clicking on a specific class

I am in the process of developing a gallery tab for a website, initially displaying three thumbnails. The goal is to reveal the remaining thumbnails when a class named show-all is clicked. I have successfully animated the gallery's height to show the ...

The model `user` does not have a primary key attribute specified. It is required for all models to have a primary key attribute defined

I have defined a waterline model below: var Waterline = require('Waterline'); var bcrypt = require('bcrypt'); var User = Waterline.Collection.extend({ identity: 'user', datastore: 'myMongo', autoPK: false, attribut ...

jquery events such as onSubmit, onComplete, etc. are commonly used

It's interesting to observe that many tools in jQuery, especially those involving ajax, contain hooks like onSubmit, onComplete, and more. Is there a specific term for this practice and the standards associated with it? Does this practice belong sol ...

What is the most effective way to delete a single value from a key with multiple values stored in local storage?

This question has come up before, but the solutions provided didn't work for me, which is why I am asking it again. Currently, I am storing values in an array that is then stored in local storage. Here is the object: data.items - 0: {id: 190217270, ...

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

Troubleshooting: Imported Variable in Angular 2+ Throwing Module Not Found Error

During my testing process, I encountered an issue when trying to require a .json file with data to perform checks on. Despite passing the string indicating where to find the file into the require function, it seems to be unsuccessful... Success: const da ...

Working with Javascript objects and arrays

Need assistance with manipulating/updating a JavaScript array. Hoping for some help. The initial array looks like this: array('saved_designs'=array()); In Javascript JSON format: {"saved_design":{}} I plan on adding a label and its associa ...

What is the correct way to align labels to the right in a column layout?

I just started learning React JS and I'm using Material-UI. One issue I encountered is that when I use the column layout with an 'xs' value, the component inside the column appears aligned to the left. To align it to the right, I tried incr ...

The alignment of Material-UI Typography in AppBar appears to be off

Having trouble centering text in an AppBar? You're not alone. Despite trying various methods like using Typography element, align="center", textAlign="center", and style={{ align: "center" }}, among others: class CustomApp extends React.Component { ...

The alignment of the rows and columns is off, causing the image to shift onto a separate row altogether

Struggling to configure the header section of my website, specifically dealing with the mobile class. I'm attempting to set up a col-xs-7 with an h1 tag and two p tags, along with a col-xs-5 containing an image. However, the col-xs-7 is taking up the ...

Interacting with Cassandra using PHP

I am attempting to execute a SELECT query from the Cassandra Database using a PHP script. The connection is successfully established through PHP. Here is the query: $session = $cluster->connect($keyspace); $result = $session->execute("SELEC ...

What is the best way to generate the message dynamically?

I have implemented the react-intl package for translation purposes in my project. Users have the option to choose between Spanish and English languages, with Spanish being the default language. When a user switches to English, all text should be dynamicall ...

Having trouble implementing object type switching in Typescript

While in the process of developing an angular application, I stumbled upon a peculiar issue. Some time ago, I crafted this piece of code which performed flawlessly: selectedGeoArea: any receiveStoreEvent(event) { switch (event.constructor) { ca ...

How to use AJAX script to call a non-static page method in ASP.NET

Is it possible to achieve this task without utilizing the UpdatePanel feature? ...

Unable to complete the task of executing com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm)

I'm encountering an issue with Maven that's been causing some trouble: [ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) on project xxx-frontend: Could not download Node.js: ...