javascript – How to get smooth transition of caraousel slides

Just add carousel-fade in your bootstrap class with the id of “sessionCarousel ” Heres an official example i tested your code and the transition effect works here. just run the code and try it yourself if that’s what you’re looking for

Checkout the fade transition example https://getbootstrap.com/docs/5.1/components/carousel/

Just change this change classes from transform to carousel-fade

   <div id="sessionCarousel" class="carousel slide carousel-fade">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

<style>
    .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1pxsolidrgba(0,0,0,.125);
    border-radius: .25rem;
    margin: 10px;
}
        .block-container-component .force-img-background {
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 86% auto !important;
        }

        .parent-container {
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .title-anchor {
            margin-left: 3rem !important;
        }

        @media (min-width: 768px) {
            .parent-container {

                width: 750px;
            }
        }

        @media (min-width: 992px) {
            .parent-container {
                width: 970px;
            }
        }

        @media (min-width: 1200px) {
            .parent-container {
                width: 1170px;
            }
        }



        @media (max-width: 767px) {
            #sessionContainer .carousel-inner .carousel-item>div {
                display: none;
            }

            #sessionContainer .carousel-inner .carousel-item>div:first-child {
                display: block;
            }
        }

        #sessionContainer .carousel-inner .carousel-item.active,
        #sessionContainer .carousel-inner .carousel-item-next,
        #sessionContainer .carousel-inner .carousel-item-prev {
            display: flex;
        }

        /* medium and up screens */
        @media (min-width: 768px) {

            #sessionContainer .carousel-inner .carousel-item-end.active,
            #sessionContainer .carousel-inner .carousel-item-next {
                transform: translateX(25%);

            }

            #sessionContainer .carousel-inner .carousel-item-start.active,
            #sessionContainer .carousel-inner .carousel-item-prev {
                transform: translateX(-25%);

            }

            #sessionContainer .card img {
                width: 98%;
            }

            #sessionContainer .carousel-item {
                justify-content: space-between;
            }
        }

        @media (max-width: 767px) {
            #sessionContainer .card img {
                width: 100%;
            }

            #sessionContainer .overlay {
                width: 100%;
                /* height: 75vh; */
            }

            #sessionContainer .carousel-inner .carousel-item.active,
            #sessionContainer .carousel-inner .carousel-item-next,
            #sessionContainer .carousel-inner .carousel-item-prev {
                display: block;
            }
        }

        .carousel-control-next,
        .carousel-control-prev {
            width: 22%;
        }

        #sessionContainer .carousel-inner .carousel-item-end,
        #sessionContainer .carousel-inner .carousel-item-start {
            transform: translateX(0);

        }

        #sessionContainer .card {
            border: 0;
        }

        #sessionContainer .card {
            position: relative;
            border-radius: 1.5rem !important;

        }

        #sessionContainer .card .card-img-overlays {
            position: absolute;
            bottom: 15%;
            left: 10%;
            color: #fff;
            font-weight: bolder;
        }

        #sessionContainer a {
            text-decoration: none;
        }

        #sessionContainer .indicator {
            border: 1px solid rgb(202, 202, 202);
            padding: 3px 6px 3px 6px;
        }

        #sessionContainer .indicator:hover {
            background-color: blue;
            border: 1px solid blue;
            transition: 200ms;
        }

        #sessionContainer .indicator:hover {
            color: white;
            transition: 200ms;
        }

        #sessionContainer .indicator {
            color: lightgray;
        }

        #sessionContainer .float-end {
            padding-top: 10px;
        }

        #sessionContainer .card-body {
            background: #041E42;
            color: white;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            padding: 1.5rem 2rem !important;
        }

        #sessionContainer .card-img-top {
            position: relative;
        }

        .card .main-img {
            position: relative !important;
        }


        .card:hover .bot-text {
            display: block !important;
        }

        .card:hover .sub-text {
            display: block !important;
        }

        .carousel-caption {
            color: #1f1818 !important;
            text-align: left;
            position: absolute;
            right: 15%;
            left: 18%;
            top: 36%;
        }

        .top-right {
            position: absolute;
            right: 5%;
            top: 7%;
        }

        .btn-know {
            background: white !important;
            color: black;
            border-radius: 20px !important;
            font-size: 1.2rem !important;
            font-weight: 700 !important;
            padding: .6rem 2rem !important;
            margin-top: 3rem !important;
        }

        .line {
            height: 6px;
            width: 100%;
            background: #2ade32;
            position: absolute;
            bottom: 0;
            left: 2%;
        }
</style>


<div class="block-container parbase section">
  <div class="block-container-component full-width classic theme-blue">
    <div class="mt-5 force-img-background"
      style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)
      data-overlay="0">

      <div class="block-container margin-bottom-0">
        <div class="block-container-list top-bot-no-inside-padding left-right-">
          <div class="title section">
            <div class="custom-targeting-buttons "></div>
            <h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session
              takeaway
              infographics</h3>
          </div>
          <div class="html-component-2.0 section">
            <!-- Raw HTML -->
            <div class="rte-styles margin-bottom-50">
              <div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;">
                <div class="row mx-auto my-auto justify-content-center">
                  <div class="col-1">
                    <a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button"
                      data-bs-slide="prev">PREVIOUS
                      <img
                        src=""
                        alt="">
                    </a>

                  </div>
                  <div class="col-10">
                    <div id="sessionCarousel" class="carousel slide carousel-fade">
                      <div class="carousel-inner mx-auto row w-100" role="listbox">
                        <div class="carousel-item active">
                          <div class="col-md-4">
                            <div class="card">
                              <div class="card-img-top">
                                <div class="line"></div>
                                <img
                                  src="https://picsum.photos/200"
                                  alt="Card image" style="width:100%">

                              </div>

                              <div class="card-body">
                                <h6 class="card-title">John Doe1</h6>
                                <p class="card-text">Some example text some example
                                  text. </p>
                                <a href="#" class="btn btn-know">Know more</a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="col-md-4">
                            <div class="card">
                              <div class="card-img-top">
                                <div class="line"></div>
                                <img
                                  src="https://picsum.photos/200"
                                  alt="Card image" style="width:100%">

                              </div>

                              <div class="card-body">
                                <h6 class="card-title">John Doe2</h6>
                                <p class="card-text">Some example text some example
                                  text. </p>
                                <a href="#" class="btn btn-know">Know more</a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="col-md-4">
                            <div class="card">
                              <div class="card-img-top">
                                <div class="line"></div>
                                <img
                                  src="https://picsum.photos/200"
                                  alt="Card image" style="width:100%">

                              </div>

                              <div class="card-body">
                                <h6 class="card-title">John Doe3</h6>
                                <p class="card-text">Some example text some example
                                  text. </p>
                                <a href="#" class="btn btn-know">Know more</a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="col-md-4">
                            <div class="card">
                              <div class="card-img-top">
                                <div class="line"></div>
                                <img
                                  src="https://picsum.photos/200"
                                  alt="Card image" style="width:100%">

                              </div>

                              <div class="card-body">
                                <h6 class="card-title">John Doe4</h6>
                                <p class="card-text">Some example text some example
                                  text. </p>
                                <a href="#" class="btn btn-know">Know more</a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="col-md-4">
                            <div class="card">
                              <div class="card-img-top">
                                <div class="line"></div>
                                <img
                                  src="https://picsum.photos/200"
                                  alt="Card image" style="width:100%">

                              </div>

                              <div class="card-body">
                                <h6 class="card-title">John Doe5</h6>
                                <p class="card-text">Some example text some example
                                  text. </p>
                                <a href="#" class="btn btn-know">Know more</a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="col-md-4">
                            <div class="card">
                              <div class="card-img-top">
                                <div class="line"></div>
                                <img
                                  src="https://picsum.photos/200"
                                  alt="Card image" style="width:100%">

                              </div>

                              <div class="card-body">
                                <h6 class="card-title">John Doe6</h6>
                                <p class="card-text">Some example text some example
                                  text. </p>
                                <a href="#" class="btn btn-know">Know more</a>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>

                    </div>
                  </div>
                  <div class="col-1">
                    <a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button"
                      data-bs-slide="next">NEXT
                      <img
                        src=""
                        alt="">
                    </a>
                  </div>

                </div>
              </div>

            </div>
            <!-- HTML Form -->
          </div>
          <div class="button-2-0 section">
            <div class="custom-targeting-buttons "></div>
            <div class="button-component-wrapper button-glms-alignment left margin-bottom-10">
              <a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content"
                href="" role="button">

                <span>
                  <i class="   button-icon-alignment-left button-icon-content2 btn"></i>
                  Click here for more

                </span>

              </a>
            </div>

          </div>

        </div>
      </div>
    </div>

  </div>
</div>

<script>
    let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item');
    sessions.forEach((el) => {
      const minPerSlide = 3
      let next = el.nextElementSibling
      for (var i = 1; i < minPerSlide; i++) {
        if (!next) {
          // wrap carousel by using first child
          next = sessions[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
      }
    })
    $(document).ready(function () {
      $('#sessionCarousel').carousel({ interval: false });
      $('#sessionCarousel').carousel('pause');
    })
</script>

Leave a Comment