testimonial slider – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 12 May 2023 07:21:27 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs https://www.codingnepalweb.com/card-slider-html-css-javascript-swiperjs/ https://www.codingnepalweb.com/card-slider-html-css-javascript-swiperjs/#respond Sun, 06 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4150 Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

In YouTube, Netflix, Facebook and other platform you may have seen and used image, text or videos carousel or sliding option form where you can get other content by sliding it. Did you know we can make that type of Card Slider just using HTML CSS and JavaScript with Swiper Js plugin.

Yes, today you will to create a Responsive Card Slider in HTML CSS JavaScript with SwiperJs plugin. Even though you are beginner at HTML CSS and JavaScript and don’t know to use plugin like SwiperJs then also you will be able to create that crousal easily after reading this blog. There are lots of Cards & Card Slider I already have created. In this card slider you will find more function and design.

Card slider are the combination of two or more than two cards that are slideable right or left.  These types of card are available on the website or in the application which contains some specific information in a brief way.

Take a look on the given image of our Card Slider. As you can see there, there are total three cards with different image, name and job. At the first and last card’s middle we can see button, obviously that is used to slide card right of left. Also, we can slide those card by grabbing cursor on it. Intresting thing on this project is that I have also added pagination. This card slider will be fully responsive.

To see the real demo of this card slider or carousel and all the code that I have used to create this card slider, you can watch the video tutorial. After watching the given video tutorial you will also know to how HTML and CSS coder are working behind this card slider and how to use swiperjs.

Card Slider in HTML CSS JavaScript | SwiperJs | Video Tutorial

You would be wondering to getting all the HTML CSS and JavaScript/SwieprJs code that I have used to create this Card Slider, don’t worry I have provided all the source code files below. Before getting into the source code file, I would like to explain given video tutorial of our project sliding card briefly.

As you have seen in the video tutorial of our Carousel. you have seen there. At first there was total three cards with image, information, buttons and pagination. When I clicked on the right side button the card slid to those left and next card appeared. Simailarly when I clicked on the right side button those card slid right and next card appeared.

Also, we were able slide card by grabbing cursor on it. Those card were fully responsive, I have show you by resizing the screen. In the small device screen those nav button was hidden. To create this project  this card slider I used HTML CSS and Swiperjs, which you already have watched in the video tutorial.

I hope, now you are able to create this Card Slider using HTML CSS and JavaScript with using plugin like SwiperJs. If you are feeling difficulty to create this sliding card, all the source code are given below.

You May Like This:

Card Slider in HTML CSS & JS | SwiperJs [Source Code]

To create Card Slider in HTML CSS & JS, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Card Slider in HTML CSS & JS by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>Responsive Card Slider in HTML CSS & JavaScript with Swiperjs</title>

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container swiper">
      <div class="slide-container">
        <div class="card-wrapper swiper-wrapper">
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/fullDev.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile1.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">David Cardlos</h3>
                <h4 class="job">Full Stack Developer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/photographer.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile2.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Siliana Ramis</h3>
                <h4 class="job">Photographer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/dataAna.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile3.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Richard Bond</h3>
                <h4 class="job">Data Analyst</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/appDev.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile4.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Priase</h3>
                <h4 class="job">App Developer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/blogger.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile5.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">James Laze</h3>
                <h4 class="job">Blogger</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-next swiper-navBtn"></div>
      <div class="swiper-button-prev swiper-navBtn"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

Second, paste the following codes into your style.css file.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}
.container {
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-container {
  margin: 0 30px;
  overflow: hidden;
}
.card {
  background: #fff;
  border-radius: 8px;
}
.card .image-box {
  height: 200px;
}
.card .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}
.card .profile-details {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 15px;
}
.card .profile-details img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.profile-details .name {
  font-size: 15px;
  font-weight: 500;
}
.profile-details .job {
  font-size: 12px;
  font-weight: 500;
  color: #4d4d4d;
}

.swiper-navBtn {
  color: #000;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
}
.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 18px;
}

.swiper-pagination-bullet {
  background-color: #000;
}

@media screen and (max-width: 768px) {
  .swiper-navBtn {
    display: none;
  }
}

Third, paste the following codes into your script.js file.

var swiper = new Swiper(".slide-container", {
  slidesPerView: 4,
  spaceBetween: 20,
  sliderPerGroup: 4,
  loop: true,
  centerSlide: "true",
  fade: "true",
  grabCursor: "true",
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    520: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 3,
    },
    1000: {
      slidesPerView: 4,
    },
  },
});

If you face any difficulties while creating your Card Slider or your code is not working as expected, you can download the source code files for this Image Slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/card-slider-html-css-javascript-swiperjs/feed/ 0 How to make Testimonial Slider in HTML CSS & JavaScript | SwiperJS https://www.codingnepalweb.com/responsive-testimonial-slider-javascript/ https://www.codingnepalweb.com/responsive-testimonial-slider-javascript/#respond Wed, 03 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4166 How to make Testimonial Slider in HTML CSS & JavaScript | SwiperJS

Hello friend, I hope you are doing and creating an excellent project. Today in this blog, you will learn to make a responsive Testimonial Slider in HTML CSS and JavaScript/SwiperJs. There are lots of Sliding Card that I have created using HTML and CSS only and HTML CSS and JavaScript with swiperjs.

Testimonials are the section that contains reviews of the products and services. As we can see on the coffee shop website there will be a review, where many reviews of the different person’s kept about that coffee.

Have a quick look at the given image of our project [Testimonial Slider], as you can see on the given image there is an image of a person and the review text of that person on the product or services, the bottom of the image there is a quote icon and person’s name and job. Technically there are two buttons on the right and left sides, and three-dot, which indicates that it is slideable. Actually when we click on the nav button that will slide right or left and another person’s quote will appear. We can slide those content by grabbing and sliding the mouse right or left.

Let’s watch the real demo of this testimonial and all the HTML  CSS and JavaScript code that I have used to create this project [Testimonial Slider].

Testimonial Slider in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Testimonial Slider. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial of [Testimonial Slider], at first there was an image of some review text and the name and jot of the person. Bottom of that testimonial content there are three dots and on the right and left side, there is two nav button. When I clicked on the right button, then that content slid left side and right-sided content appeared, similarly when I clicked on the left side button, the content slid right side and left-sided content appeared. Also, I slid that content just by grabbing the content and moving the mouse right or left.

We saw that our testimonial was fully responsive, when I decreased the width of the testimonial it fitted according to the screen. When our testimonial width came as our normal tablet screen sizes, then its nav button disappear because we can slide it by finger too.

I hope now you can create this testimonial using HTML CSS and JavaScript with SwiperJs. If you are feeling difficulty creating this testimonial, you can take the source code that I have given below.

You Might Like This:

Testimonial Slider [Source Code]

To get the following HTML CSS and JavaScript code for the Testimonial Slider, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>Responsive Testimonial Slider</title>

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Boxicons CSS -->
    <link
      href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <section class="container">
      <div class="testimonial mySwiper">
        <div class="testi-content swiper-wrapper">
          <div class="slide swiper-slide">
            <img src="#" alt="" class="image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
              saepe provident dolorem a quaerat quo error facere nihil deleniti
              eligendi ipsum adipisci, fugit, architecto amet asperiores
              doloremque deserunt eum nemo.
            </p>

            <i class="bx bxs-quote-alt-left quote-icon"></i>

            <div class="details">
              <span class="name">Marnie Lotter</span>
              <span class="job">Web Developer</span>
            </div>
          </div>
          <div class="slide swiper-slide">
            <img src="#" alt="" class="image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
              saepe provident dolorem a quaerat quo error facere nihil deleniti
              eligendi ipsum adipisci, fugit, architecto amet asperiores
              doloremque deserunt eum nemo.
            </p>

            <i class="bx bxs-quote-alt-left quote-icon"></i>

            <div class="details">
              <span class="name">Marnie Lotter</span>
              <span class="job">Web Developer</span>
            </div>
          </div>
          <div class="slide swiper-slide">
            <img src="#" alt="" class="image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
              saepe provident dolorem a quaerat quo error facere nihil deleniti
              eligendi ipsum adipisci, fugit, architecto amet asperiores
              doloremque deserunt eum nemo.
            </p>

            <i class="bx bxs-quote-alt-left quote-icon"></i>

            <div class="details">
              <span class="name">Marnie Lotter</span>
              <span class="job">Web Developer</span>
            </div>
          </div>
        </div>
        <div class="swiper-button-next nav-btn"></div>
        <div class="swiper-button-prev nav-btn"></div>
        <div class="swiper-pagination"></div>
      </div>
    </section>

    <!-- Swiper JS -->
    <script src="js/swiper-bundle.min.js"></script>
    <!-- JavaScript -->
    <script src="js/script.js"></script>
  </body>
</html>

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3f2fd;
}
.testimonial {
  position: relative;
  max-width: 900px;
  width: 100%;
  padding: 50px 0;
  overflow: hidden;
}
.testimonial .image {
  height: 170px;
  width: 170px;
  object-fit: cover;
  border-radius: 50%;
}
.testimonial .slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 30px;
  height: 100%;
  width: 100%;
}
.slide p {
  text-align: center;
  padding: 0 160px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.slide .quote-icon {
  font-size: 30px;
  color: #4070f4;
}
.slide .details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.details .name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.details .job {
  font-size: 12px;
  font-weight: 400;
  color: #333;
}
/* swiper button css */
.nav-btn {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: translateY(30px);
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}
.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.nav-btn::after,
.nav-btn::before {
  font-size: 20px;
  color: #fff;
}
.swiper-pagination-bullet {
  background-color: rgba(0, 0, 0, 0.8);
}
.swiper-pagination-bullet-active {
  background-color: #4070f4;
}
@media screen and (max-width: 768px) {
  .slide p {
    padding: 0 20px;
  }
  .nav-btn {
    display: none;
  }
}

 var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  grabCursor: true,
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

If you face any difficulties while creating your Testimonial Slider or your code is not working as expected, you can download the source code files for this Review Slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/responsive-testimonial-slider-javascript/feed/ 0