August 7, 2022

Responsive Slider Component for User Testimonials for a Fictitious Coding Bootcamp

The user testimonials slider component for Bootcamp Virtual Encoder is built with HTML and CSS. This Vanilla JS slider component for displaying product testimonials, team members, and service comments in an elegant way.

image slider in javascript source code, responsive automatic image slider in html, automatic image slider in html css, automatic image slider javascript

How to make use of it:

1. Add quotes, names, roles, and pictures to the testimonial carousel.

<section class="section-testimonials">
  <div class="slider">
    <!-- Slides -->
    <div class="slider__slides">
      <div class="slider__slide slider__slide--1">
        <figure class="testimonial slider__slide-content">
          <blockquote class="testimonial__text">
            // Add Image Here
            <p class="testimonial__quote">
              “ I’ve been interested in coding for a while but never taken the jump, until now.
              I couldn’t recommend this course enough. I’m now in the job of my dreams and so
              excited about the future. ”
            </p>
            <cite class="testimonial__cite">
              <span class="testimonial__cite--name">Tanya Sinclair </span>
              <span class="testimonial__cite--role">UX Engineer</span>
            </cite>
          </blockquote>
          <div class="testimonial__img">
            // Add image Here
          </div>
        </figure>
      </div>
      <div class="slider__slide slider__slide--2">
        <figure class="testimonial slider__slide-content">
          <blockquote class="testimonial__text">
           // Add image Here
            <p class="testimonial__quote">
              “ If you want to lay the best foundation possible I’d recommend taking this course.
              The depth the instructors go into is incredible. I now feel so confident about
              starting up as a professional developer. ”
            </p>
            <cite class="testimonial__cite">
              <span class="testimonial__cite--name">John Tarkpor </span>
              <span class="testimonial__cite--role">Junior Front-end Developer</span>
            </cite>
          </blockquote>
          <div class="testimonial__img">
            // Add Image Here
          </div>
        </figure>
      </div>
    </div>
    <!-- Controls -->
    <div class="slider__buttons">
      <div class="slider__button slider__button--prev">
        <svg class="slider__button-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="18">
          <path fill="none" stroke-width="3" d="M11 1L3 9l8 8" /></svg>
      </div>
      <div class="slider__button slider__button--next">
        <svg class="slider__button-icon" xmlns="http://www.w3.org/2000/svg" width="13" height="18">
          <path fill="none" stroke-width="3" d="M2 1l8 8-8 8" /></svg>
      </div>
    </div>
  </div>
</section>

2. Add the principle stylesheet and slider.js to the webpage.

<link rel="stylesheet" href="css/style.css" />
<script src="js/slider.js"></script>

Responsive Testimonial Carousel In JavaScript, Testimonials Slider Plugin/Github


See Demo And Download

Official Website(bjfirmacion): Click Here

This superior jQuery/javascript plugin is developed by bjfirmacion. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.