Bootstrap 4 Responsive Carousel Tutorial

Bootstrap 4 Responsive Product Image Carousel Tutorial

Live Preview

HTML

<div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="slider ml-lg-5 ml-md-5 mt-5 py-lg-5">
            <div class="row">
              <div class="col-md-4">
                <div
                  class="imgContainer ml-lg-n5 mt-lg-0 mt-md-0 ml-md-n5 mt-n5"
                >
                  <div class="image">
                    <img src="1.jpg"/>
                  </div>
                  <div class="image">
                    <img src="2.jpg"/>
                  </div>
                  <div class="image">
                    <img src="3.jpg"/>
                  </div>
                </div>
              </div>
              <div class="col-md-8">
                <!-- slider -->
                <div
                  id="productSlider"
                  class="carousel slide carousel-fade pr-lg-5 py-lg-0 py-4"
                  data-ride="carousel"
                >
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <div class="content">
                        <div class="date">
                          26 December 2019
                        </div>
                        <div class="title">
                          Lorem ipsum dolor - one
                        </div>
                        <div class="desc">
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. Error itaque, libero dignissimos nihil aliquam
                          eveniet tenetur cupiditate consectetur quod modi
                          repellendus veniam, repellat iusto fugiat temporibus
                          officia facere nulla nam.
                        </div>
                        <div
                          class="d-flex justify-content-center justify-content-lg-start"
                        >
                          <button class="btn readMoreBtn">
                            Read More
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <div class="content">
                        <div class="date">
                          26 December 2019
                        </div>
                        <div class="title">
                          Lorem ipsum dolor - two
                        </div>
                        <div class="desc">
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. Error itaque, libero dignissimos nihil aliquam
                          eveniet tenetur cupiditate consectetur quod modi
                          repellendus veniam, repellat iusto fugiat temporibus
                          officia facere nulla nam.
                        </div>
                        <div
                          class="d-flex justify-content-center justify-content-lg-start"
                        >
                          <button class="btn readMoreBtn">
                            Read More
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <div class="content">
                        <div class="date">
                          26 December 2019
                        </div>
                        <div class="title">
                          Lorem ipsum dolor -three
                        </div>
                        <div class="desc">
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. Error itaque, libero dignissimos nihil aliquam
                          eveniet tenetur cupiditate consectetur quod modi
                          repellendus veniam, repellat iusto fugiat temporibus
                          officia facere nulla nam.
                        </div>
                        <div
                          class="d-flex justify-content-center justify-content-lg-start"
                        >
                          <button class="btn readMoreBtn">
                            Read More
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- indicators -->
                  <ol class="carousel-indicators indicators">
                    <li
                      data-target="#productSlider"
                      data-slide-to="0"
                      class="active"
                    ></li>
                    <li data-target="#productSlider" data-slide-to="1"></li>
                    <li data-target="#productSlider" data-slide-to="2"></li>
                  </ol>
                  <!-- indicators -->
                </div>
                <!-- slider -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<!-- 
<div class="watchMe">
  <a href="https://www.youtube.com/frontendfunn">
    <span>Find Me</span>
    <i class="fab fa-youtube"></i>
  </a>
</div> -->

SCSS

@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,700");
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}

$yellow: #febd3a;
$red: #fd3838;
$white: #ffffff;
$black: #000000;
$color1: $yellow;
$color2: $red;
$color3: $white;
$color4: $black;
$transitionTime: 0.5s;
$transitionFunction: ease-in-out;
.ease {
  transition: all $transitionFunction $transitionTime;
}
body {
  font-family: "Work Sans", sans-serif;
  background-image: linear-gradient(90deg, lighten($color1,10%), lighten($color2,10%));
  height: 100vh;
}

// * Slider
.slider {
  padding: rem(16px);
  margin-top: rem(32px);
  margin-bottom: rem(16px);
  background-color: $color3;
  border-radius: rem(16px);
  box-shadow:rem(0px) rem(4px) rem(20px) rem(1px) rgba(0,0,0,0.25);
}

// * Slider Images
.slider .imgContainer {
  min-height: rem(300px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: linear-gradient(-45deg, $color1, $color2);
  box-shadow: rem(0px) rem(2px) rem(10px) rem(1px) rgba(0, 0, 0, 0.15);
  border-radius: rem(16px);
  overflow: hidden;
  .image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    @extend .ease;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-width: 100%;
      max-height: 100%;
      transform: translateX(-40px);
      position: relative;
      @extend .ease;
    }
    &.active {
      opacity: 1;
      img {
        transform: translateX(0px);
      }
    }
  }
}

/* slider content*/
.slider .content {
  background-color: $color3;
  margin-top: rem(16px);
  margin-bottom: rem(16px);
  .date {
    font-size: rem(14px);
    font-weight: 600;
    color: darken($color3, 50%);
    margin-bottom: rem(0px);
    margin-top: rem(8px);
  }
  .title {
    font-weight: 600;
    font-size: rem(24px);
    margin-bottom: rem(16px);
  }
  .desc {
    font-size: rem(14px);
    text-align: justify;
    color: darken($color3, 50%);
    margin-bottom: rem(16px);
  }
  .readMoreBtn {
    background-image: linear-gradient(45deg,$color1 1%, $color2);
    padding: rem(8px) rem(24px);
    border-radius: rem(500px);
    color: $color3;
    font-weight: 600;
    border: none;
    text-transform: uppercase;
    outline: 0;
   box-shadow: rem(0px) rem(1px) rem(4px) rgba(0, 0, 0, 0.15);
  }
}
/*carousel slide*/
.slider .slide {
  height: 100%;
  display: flex;
  align-items: center;
}

.slider .indicators {
  top: 0;
  bottom: auto;
  margin: rem(4px);
  li {
    height: rem(10px);
    width: rem(10px);
    background-color: darken($color3, 30%);
    border-radius: rem(20px);
    background-clip: initial;
    box-sizing: border-box;
    border: none;
    margin: rem(4px);
    @extend .ease;
    &.active {
      width: rem(30px);
      background-color: $color2;
    }
  }
}

@media (min-width: 768px) {
  .slider .indicators {
    top: auto;
    bottom: 0;
  }
}

/*indicators*/
@media (min-width: 992px) {
  .slider .indicators {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: auto;
    margin: auto rem(16px);
    bottom: 0;
    top: 0;
    li {
      &.active {
        height: rem(30px);
        width: rem(10px);
      }
    }
  }
}

/*animation*/
.slider .carousel-item {
  .content {
    > * {
      transform: translateY(30px);
      @extend .ease;
      opacity: 0;
    }
  }
  &.active {
    .content {
      > * {
        transform: translateY(0px);
        opacity: 1;
        @for $i from 1 through 10 {
          &:nth-child(#{$i}) {
            transition-delay: #{$i * 0.05s};
          }
        }
      }
    }
  }
}


@import url('https://fonts.googleapis.com/css?family=Abel');
$fontFamily: 'Abel', sans-serif;

.watchMe{
  position:absolute;
  bottom: 10px;
  right: 10px;
  font-family:$fontFamily;
  padding:rem(10px);
  animation:WatchAnimateBackground 1s ease-in-out infinite;
  a{
    display: flex;
    align-items: center;
    text-decoration:none;
    font-size:rem(30px);
    animation:WatchAnimate 1s ease-in-out infinite;
    i.fab{
      margin-left:10px;
    }
  }
}

@keyframes WatchAnimate{
  @for $i from 1 through 100{
    #{$i}%{
      color:hsl($i * (360 / 100),100%,50%);
    }
  }
}


@keyframes WatchAnimateBackground{
  @for $i from 1 through 100{
    #{$i}%{
      background-color:complement(hsl($i * (360 / 100),100%,50%));
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,700");
@import url("https://fonts.googleapis.com/css?family=Abel");
.ease, .slider .carousel-item .content > *, .slider .indicators li, .slider .imgContainer .image img, .slider .imgContainer .image {
  transition: all ease-in-out 0.5s;
}

body {
  font-family: "Work Sans", sans-serif;
  background-image: linear-gradient(90deg, #fece6d, #fe6a6a);
  height: 100vh;
}

.slider {
  padding: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0rem 0.25rem 1.25rem 0.0625rem rgba(0, 0, 0, 0.25);
}

.slider .imgContainer {
  min-height: 18.75rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: linear-gradient(-45deg, #febd3a, #fd3838);
  box-shadow: 0rem 0.125rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  overflow: hidden;
}
.slider .imgContainer .image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider .imgContainer .image img {
  max-width: 100%;
  max-height: 100%;
  transform: translateX(-40px);
  position: relative;
}
.slider .imgContainer .image.active {
  opacity: 1;
}
.slider .imgContainer .image.active img {
  transform: translateX(0px);
}

/* slider content*/
.slider .content {
  background-color: #ffffff;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.slider .content .date {
  font-size: 0.875rem;
  font-weight: 600;
  color: gray;
  margin-bottom: 0rem;
  margin-top: 0.5rem;
}
.slider .content .title {
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.slider .content .desc {
  font-size: 0.875rem;
  text-align: justify;
  color: gray;
  margin-bottom: 1rem;
}
.slider .content .readMoreBtn {
  background-image: linear-gradient(45deg, #febd3a 1%, #fd3838);
  padding: 0.5rem 1.5rem;
  border-radius: 31.25rem;
  color: #ffffff;
  font-weight: 600;
  border: none;
  text-transform: uppercase;
  outline: 0;
  box-shadow: 0rem 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}

/*carousel slide*/
.slider .slide {
  height: 100%;
  display: flex;
  align-items: center;
}

.slider .indicators {
  top: 0;
  bottom: auto;
  margin: 0.25rem;
}
.slider .indicators li {
  height: 0.625rem;
  width: 0.625rem;
  background-color: #b3b3b3;
  border-radius: 1.25rem;
  background-clip: initial;
  box-sizing: border-box;
  border: none;
  margin: 0.25rem;
}
.slider .indicators li.active {
  width: 1.875rem;
  background-color: #fd3838;
}

@media (min-width: 768px) {
  .slider .indicators {
    top: auto;
    bottom: 0;
  }
}
/*indicators*/
@media (min-width: 992px) {
  .slider .indicators {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: auto;
    margin: auto 1rem;
    bottom: 0;
    top: 0;
  }
  .slider .indicators li.active {
    height: 1.875rem;
    width: 0.625rem;
  }
}
/*animation*/
.slider .carousel-item .content > * {
  transform: translateY(30px);
  opacity: 0;
}
.slider .carousel-item.active .content > * {
  transform: translateY(0px);
  opacity: 1;
}
.slider .carousel-item.active .content > *:nth-child(1) {
  transition-delay: 0.05s;
}
.slider .carousel-item.active .content > *:nth-child(2) {
  transition-delay: 0.1s;
}
.slider .carousel-item.active .content > *:nth-child(3) {
  transition-delay: 0.15s;
}
.slider .carousel-item.active .content > *:nth-child(4) {
  transition-delay: 0.2s;
}
.slider .carousel-item.active .content > *:nth-child(5) {
  transition-delay: 0.25s;
}
.slider .carousel-item.active .content > *:nth-child(6) {
  transition-delay: 0.3s;
}
.slider .carousel-item.active .content > *:nth-child(7) {
  transition-delay: 0.35s;
}
.slider .carousel-item.active .content > *:nth-child(8) {
  transition-delay: 0.4s;
}
.slider .carousel-item.active .content > *:nth-child(9) {
  transition-delay: 0.45s;
}
.slider .carousel-item.active .content > *:nth-child(10) {
  transition-delay: 0.5s;
}

.watchMe {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: "Abel", sans-serif;
  padding: 0.625rem;
  animation: WatchAnimateBackground 1s ease-in-out infinite;
}
.watchMe a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.875rem;
  animation: WatchAnimate 1s ease-in-out infinite;
}
.watchMe a i.fab {
  margin-left: 10px;
}

@keyframes WatchAnimate {
  1% {
    color: #ff0f00;
  }
  2% {
    color: #ff1f00;
  }
  3% {
    color: #ff2e00;
  }
  4% {
    color: #ff3d00;
  }
  5% {
    color: #ff4d00;
  }
  6% {
    color: #ff5c00;
  }
  7% {
    color: #ff6b00;
  }
  8% {
    color: #ff7a00;
  }
  9% {
    color: #ff8a00;
  }
  10% {
    color: #ff9900;
  }
  11% {
    color: #ffa800;
  }
  12% {
    color: #ffb800;
  }
  13% {
    color: #ffc700;
  }
  14% {
    color: #ffd600;
  }
  15% {
    color: #ffe600;
  }
  16% {
    color: #fff500;
  }
  17% {
    color: #faff00;
  }
  18% {
    color: #ebff00;
  }
  19% {
    color: #dbff00;
  }
  20% {
    color: #ccff00;
  }
  21% {
    color: #bdff00;
  }
  22% {
    color: #adff00;
  }
  23% {
    color: #9eff00;
  }
  24% {
    color: #8fff00;
  }
  25% {
    color: #80ff00;
  }
  26% {
    color: #70ff00;
  }
  27% {
    color: #61ff00;
  }
  28% {
    color: #52ff00;
  }
  29% {
    color: #42ff00;
  }
  30% {
    color: #33ff00;
  }
  31% {
    color: #24ff00;
  }
  32% {
    color: #14ff00;
  }
  33% {
    color: #05ff00;
  }
  34% {
    color: #00ff0a;
  }
  35% {
    color: #00ff1a;
  }
  36% {
    color: #00ff29;
  }
  37% {
    color: #00ff38;
  }
  38% {
    color: #00ff47;
  }
  39% {
    color: #00ff57;
  }
  40% {
    color: #00ff66;
  }
  41% {
    color: #00ff75;
  }
  42% {
    color: #00ff85;
  }
  43% {
    color: #00ff94;
  }
  44% {
    color: #00ffa3;
  }
  45% {
    color: #00ffb3;
  }
  46% {
    color: #00ffc2;
  }
  47% {
    color: #00ffd1;
  }
  48% {
    color: #00ffe0;
  }
  49% {
    color: #00fff0;
  }
  50% {
    color: aqua;
  }
  51% {
    color: #00f0ff;
  }
  52% {
    color: #00e0ff;
  }
  53% {
    color: #00d1ff;
  }
  54% {
    color: #00c2ff;
  }
  55% {
    color: #00b3ff;
  }
  56% {
    color: #00a3ff;
  }
  57% {
    color: #0094ff;
  }
  58% {
    color: #0085ff;
  }
  59% {
    color: #0075ff;
  }
  60% {
    color: #0066ff;
  }
  61% {
    color: #0057ff;
  }
  62% {
    color: #0047ff;
  }
  63% {
    color: #0038ff;
  }
  64% {
    color: #0029ff;
  }
  65% {
    color: #001aff;
  }
  66% {
    color: #000aff;
  }
  67% {
    color: #0500ff;
  }
  68% {
    color: #1400ff;
  }
  69% {
    color: #2400ff;
  }
  70% {
    color: #3300ff;
  }
  71% {
    color: #4200ff;
  }
  72% {
    color: #5200ff;
  }
  73% {
    color: #6100ff;
  }
  74% {
    color: #7000ff;
  }
  75% {
    color: #8000ff;
  }
  76% {
    color: #8f00ff;
  }
  77% {
    color: #9e00ff;
  }
  78% {
    color: #ad00ff;
  }
  79% {
    color: #bd00ff;
  }
  80% {
    color: #cc00ff;
  }
  81% {
    color: #db00ff;
  }
  82% {
    color: #eb00ff;
  }
  83% {
    color: #fa00ff;
  }
  84% {
    color: #ff00f5;
  }
  85% {
    color: #ff00e6;
  }
  86% {
    color: #ff00d6;
  }
  87% {
    color: #ff00c7;
  }
  88% {
    color: #ff00b8;
  }
  89% {
    color: #ff00a8;
  }
  90% {
    color: #ff0099;
  }
  91% {
    color: #ff008a;
  }
  92% {
    color: #ff007a;
  }
  93% {
    color: #ff006b;
  }
  94% {
    color: #ff005c;
  }
  95% {
    color: #ff004d;
  }
  96% {
    color: #ff003d;
  }
  97% {
    color: #ff002e;
  }
  98% {
    color: #ff001f;
  }
  99% {
    color: #ff000f;
  }
  100% {
    color: red;
  }
}
@keyframes WatchAnimateBackground {
  1% {
    background-color: #00f0ff;
  }
  2% {
    background-color: #00e0ff;
  }
  3% {
    background-color: #00d1ff;
  }
  4% {
    background-color: #00c2ff;
  }
  5% {
    background-color: #00b3ff;
  }
  6% {
    background-color: #00a3ff;
  }
  7% {
    background-color: #0094ff;
  }
  8% {
    background-color: #0085ff;
  }
  9% {
    background-color: #0075ff;
  }
  10% {
    background-color: #0066ff;
  }
  11% {
    background-color: #0057ff;
  }
  12% {
    background-color: #0047ff;
  }
  13% {
    background-color: #0038ff;
  }
  14% {
    background-color: #0029ff;
  }
  15% {
    background-color: #001aff;
  }
  16% {
    background-color: #000aff;
  }
  17% {
    background-color: #0500ff;
  }
  18% {
    background-color: #1400ff;
  }
  19% {
    background-color: #2400ff;
  }
  20% {
    background-color: #3300ff;
  }
  21% {
    background-color: #4200ff;
  }
  22% {
    background-color: #5200ff;
  }
  23% {
    background-color: #6100ff;
  }
  24% {
    background-color: #7000ff;
  }
  25% {
    background-color: #8000ff;
  }
  26% {
    background-color: #8f00ff;
  }
  27% {
    background-color: #9e00ff;
  }
  28% {
    background-color: #ad00ff;
  }
  29% {
    background-color: #bd00ff;
  }
  30% {
    background-color: #cc00ff;
  }
  31% {
    background-color: #db00ff;
  }
  32% {
    background-color: #eb00ff;
  }
  33% {
    background-color: #fa00ff;
  }
  34% {
    background-color: #ff00f5;
  }
  35% {
    background-color: #ff00e6;
  }
  36% {
    background-color: #ff00d6;
  }
  37% {
    background-color: #ff00c7;
  }
  38% {
    background-color: #ff00b8;
  }
  39% {
    background-color: #ff00a8;
  }
  40% {
    background-color: #ff0099;
  }
  41% {
    background-color: #ff008a;
  }
  42% {
    background-color: #ff007a;
  }
  43% {
    background-color: #ff006b;
  }
  44% {
    background-color: #ff005c;
  }
  45% {
    background-color: #ff004d;
  }
  46% {
    background-color: #ff003d;
  }
  47% {
    background-color: #ff002e;
  }
  48% {
    background-color: #ff001f;
  }
  49% {
    background-color: #ff000f;
  }
  50% {
    background-color: red;
  }
  51% {
    background-color: #ff0f00;
  }
  52% {
    background-color: #ff1f00;
  }
  53% {
    background-color: #ff2e00;
  }
  54% {
    background-color: #ff3d00;
  }
  55% {
    background-color: #ff4d00;
  }
  56% {
    background-color: #ff5c00;
  }
  57% {
    background-color: #ff6b00;
  }
  58% {
    background-color: #ff7a00;
  }
  59% {
    background-color: #ff8a00;
  }
  60% {
    background-color: #ff9900;
  }
  61% {
    background-color: #ffa800;
  }
  62% {
    background-color: #ffb800;
  }
  63% {
    background-color: #ffc700;
  }
  64% {
    background-color: #ffd600;
  }
  65% {
    background-color: #ffe600;
  }
  66% {
    background-color: #fff500;
  }
  67% {
    background-color: #faff00;
  }
  68% {
    background-color: #ebff00;
  }
  69% {
    background-color: #dbff00;
  }
  70% {
    background-color: #ccff00;
  }
  71% {
    background-color: #bdff00;
  }
  72% {
    background-color: #adff00;
  }
  73% {
    background-color: #9eff00;
  }
  74% {
    background-color: #8fff00;
  }
  75% {
    background-color: #80ff00;
  }
  76% {
    background-color: #70ff00;
  }
  77% {
    background-color: #61ff00;
  }
  78% {
    background-color: #52ff00;
  }
  79% {
    background-color: #42ff00;
  }
  80% {
    background-color: #33ff00;
  }
  81% {
    background-color: #24ff00;
  }
  82% {
    background-color: #14ff00;
  }
  83% {
    background-color: #05ff00;
  }
  84% {
    background-color: #00ff0a;
  }
  85% {
    background-color: #00ff1a;
  }
  86% {
    background-color: #00ff29;
  }
  87% {
    background-color: #00ff38;
  }
  88% {
    background-color: #00ff47;
  }
  89% {
    background-color: #00ff57;
  }
  90% {
    background-color: #00ff66;
  }
  91% {
    background-color: #00ff75;
  }
  92% {
    background-color: #00ff85;
  }
  93% {
    background-color: #00ff94;
  }
  94% {
    background-color: #00ffa3;
  }
  95% {
    background-color: #00ffb3;
  }
  96% {
    background-color: #00ffc2;
  }
  97% {
    background-color: #00ffd1;
  }
  98% {
    background-color: #00ffe0;
  }
  99% {
    background-color: #00fff0;
  }
  100% {
    background-color: aqua;
  }
}

JAVASCRIPT

$(document).ready(function() {
  var getActiveSlideIndex = function() {
    return $("#productSlider .active").index("#productSlider .carousel-item");
  };
  var slider = function(IndexNumber) {
    $(".slider .image")
      .removeClass("active")
      .eq(IndexNumber)
      .addClass("active");
  };
  slider(getActiveSlideIndex());
  $("#productSlider").on("slid.bs.carousel", function() {
    slider(getActiveSlideIndex());
  });
});

 

Add a Comment

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