Full Width Testimonials Slider – web development

Full Width Testimonials Slider – web development

 

HTML

<div class="container-fluid">
      <div class="row">
        <div class="testimonialsContainer my-5">
          <div class="col-md-6 offset-md-3">
            <div class="testimonials">
              <div class="testimonial">
                <div class="userInfo">
                  <div class="imgContainer">
                    <img src="http://tobot.youngtoys.com/upload/character/4dfcff00-2cfb-42a9-8813-2ea3e69bd781.png" />
                  </div>
                  <div class="name">Kassie</div>
                  <div class="designation">Director Of Marketing</div>
                </div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
                exercitationem repellat architecto. Odio, illum mollitia
                corporis facere dolor veniam officia ad cupiditate pariatur
                laudantium quam accusantium tenetur assumenda ipsa, odit libero,
                ipsum modi nisi optio sint culpa consectetur fugit. Nobis rerum
                maiores at natus quaerat ex dolor repellat eaque tempora!
              </div>
              <!-- 1 -->
              <div class="testimonial">
                <div class="userInfo">
                  <div class="imgContainer">
                    <img src="http://tobot.youngtoys.com/upload/character/4dfcff00-2cfb-42a9-8813-2ea3e69bd781.png" />
                  </div>
                  <div class="name">Kassie</div>
                  <div class="designation">Director Of Marketing</div>
                </div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
                exercitationem repellat architecto. Odio, illum mollitia
                corporis facere dolor veniam officia ad cupiditate pariatur
                laudantium quam accusantium tenetur assumenda ipsa, odit libero,
                ipsum modi nisi optio sint culpa consectetur fugit. Nobis rerum
                maiores at natus quaerat ex dolor repellat eaque tempora!
              </div>
              <!-- 2 -->
              <div class="testimonial">
                <div class="userInfo">
                  <div class="imgContainer">
                    <img src="http://tobot.youngtoys.com/upload/character/4dfcff00-2cfb-42a9-8813-2ea3e69bd781.png" />
                  </div>
                  <div class="name">Kassie</div>
                  <div class="designation">Director Of Marketing</div>
                </div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
                exercitationem repellat architecto. Odio, illum mollitia
                corporis facere dolor veniam officia ad cupiditate pariatur
                laudantium quam accusantium tenetur assumenda ipsa, odit libero,
                ipsum modi nisi optio sint culpa consectetur fugit. Nobis rerum
                maiores at natus quaerat ex dolor repellat eaque tempora!
              </div>
              <!-- 3 -->

              <div class="testimonial">
                <div class="userInfo">
                  <div class="imgContainer">
                    <img src="http://tobot.youngtoys.com/upload/character/4dfcff00-2cfb-42a9-8813-2ea3e69bd781.png" />
                  </div>
                  <div class="name">Kassie</div>
                  <div class="designation">Director Of Marketing</div>
                </div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
                exercitationem repellat architecto. Odio, illum mollitia
                corporis facere dolor veniam officia ad cupiditate pariatur
                laudantium quam accusantium tenetur assumenda ipsa, odit libero,
                ipsum modi nisi optio sint culpa consectetur fugit. Nobis rerum
                maiores at natus quaerat ex dolor repellat eaque tempora!
              </div>

              <!-- 4 -->

              <div class="testimonial">
                <div class="userInfo">
                  <div class="imgContainer">
                    <img src="http://tobot.youngtoys.com/upload/character/4dfcff00-2cfb-42a9-8813-2ea3e69bd781.png" />
                  </div>
                  <div class="name">Kassie</div>
                  <div class="designation">Director Of Marketing</div>
                </div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
                exercitationem repellat architecto. Odio, illum mollitia
                corporis facere dolor veniam officia ad cupiditate pariatur
                laudantium quam accusantium tenetur assumenda ipsa, odit libero,
                ipsum modi nisi optio sint culpa consectetur fugit. Nobis rerum
                maiores at natus quaerat ex dolor repellat eaque tempora!
              </div>
              <!-- 5 -->
            </div>
          </div>
        </div>
      </div>
    </div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Courgette");
$fontFamily: "Courgette", cursive;
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
$background: #373737;
$testimonialBackground: #434343;
$fontColor: #b4b4b4;
$testimonialActiveColor: #cb2c3e;
$white: #ffffff;
body {
  background-color: $background;
}
.slick-list {
  overflow: visible;
}
.m-0 {
  margin: 0 !important;
}
.testimonialsContainer {
  overflow: hidden;
  .slick-active {
    background-color: $testimonialActiveColor;
    color: $white;
    .userInfo {
      opacity: 1;
    }
  }
}
.testimonial {
  padding: rem(10px);
  background-color: $testimonialBackground;
  margin: rem(10px);
  margin-bottom: rem(120px);
  border-radius: rem(5px);
  color: $fontColor;
  position: relative;
  padding-bottom: rem(50px);
  outline: 0;
  font-family: $fontFamily;
  &:hover{
    cursor:move;
  }
  .userInfo {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    right: 0;
    margin: auto;
    bottom: rem(-120px);
    opacity: 0.5;
    .imgContainer {
      height: rem(100px);
      width: rem(100px);
      img {
        max-width: 100%;
        border: rem(4px) solid $white;
        border-radius: rem(500px);
      }
    }
    .name {
      color: $white;
      font-size: rem(30px);
    }
    .designation {
      color: $testimonialActiveColor;
    }
  }
}

.triggers {
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 10px 0;
  li {
    margin: rem(10px) rem(4px);
    height: rem(6px);
    width: rem(6px);
    border-radius: rem(200px);
    background-color: $fontColor;
    &:hover {
      cursor: pointer;
    }
    button {
      overflow: hidden;
      display: none;
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Courgette");
body {
  background-color: #373737;
}

.slick-list {
  overflow: visible;
}

.m-0 {
  margin: 0 !important;
}

.testimonialsContainer {
  overflow: hidden;
}
.testimonialsContainer .slick-active {
  background-color: #cb2c3e;
  color: #ffffff;
}
.testimonialsContainer .slick-active .userInfo {
  opacity: 1;
}

.testimonial {
  padding: 0.625rem;
  background-color: #434343;
  margin: 0.625rem;
  margin-bottom: 7.5rem;
  border-radius: 0.3125rem;
  color: #b4b4b4;
  position: relative;
  padding-bottom: 3.125rem;
  outline: 0;
  font-family: "Courgette", cursive;
}
.testimonial:hover {
  cursor: move;
}
.testimonial .userInfo {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -7.5rem;
  opacity: 0.5;
}
.testimonial .userInfo .imgContainer {
  height: 6.25rem;
  width: 6.25rem;
}
.testimonial .userInfo .imgContainer img {
  max-width: 100%;
  border: 0.25rem solid #ffffff;
  border-radius: 31.25rem;
}
.testimonial .userInfo .name {
  color: #ffffff;
  font-size: 1.875rem;
}
.testimonial .userInfo .designation {
  color: #cb2c3e;
}

.triggers {
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 10px 0;
}
.triggers li {
  margin: 0.625rem 0.25rem;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 12.5rem;
  background-color: #b4b4b4;
}
.triggers li:hover {
  cursor: pointer;
}
.triggers li button {
  overflow: hidden;
  display: none;
}

Javascript

$(document).ready(function() {
  var testimonialsSlider = function(){
    $(".testimonials").slick({
    arrows: false,
    dots: true,
    cssEase: "ease-in-out",
    centerMode: true,
    infinite: true,
    speed: 1000,
    dotsClass: "triggers",
    useTransform: true,
    slidesToShow: 1,
    centerPadding: "0px",
  });
  }
  testimonialsSlider();
  $(window).resize(function(){
    testimonialsSlider();
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *