carousel example

gistfile1.md

<div class="ad-med-carousel">
        <div class="ad-med-carousel-inner">
            <div class="ad-med-curousel-item " data-ref='image1'>
                <div class="ad-med-image" >
                    <img data-ref='srcimage1' src="" alt="" srcset="">
                </div>
                <div class="ad-med-car-info" data-ref='car-info1'>
                        Rich Mortons Glen 
Burnie Lincoln Mercury 
                        1
                </div>
            </div>
            <div class="ad-med-curousel-item " data-ref='image2'>
                    <div class="ad-med-image">
                        <img data-ref='srcimage2' src="" alt="" srcset="">
                    </div>
                    <div class="ad-med-car-info" data-ref='car-info2'>
                            Rich Mortons Glen 
Burnie Lincoln Mercury 
                           2
                    </div>
            </div>
            <div class="ad-med-curousel-item " data-ref='image3'>
                    <div class="ad-med-image">
                        <img data-ref='srcimage3' src="" alt="" srcset="">
                    </div>
                    <div class="ad-med-car-info" data-ref='car-info3'>
                            Rich Mortons Glen 
Burnie Lincoln Mercury 
                            3
                    </div>
            </div>
            
        </div>
        <div class="ad-med-carousel-next" data-ref='carousel-next'>
                <svg aria-hidden="true" focusable="true" data-icon="angle-right" role="img" width='24' height='24' viewBox="0 0 192 512" class="svg-inline--fa fa-angle-right fa-w-6 fa-5x"><path fill="currentColor" d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z" class=""></path></svg>
        </div>
    </div>

    .ad-med-carousel{
        width: 268px;
        display: flex;
        .ad-med-carousel-inner{
            overflow: hidden;
            display: flex;
            transform: translate3d(0, 0, 0);
            .ad-med-curousel-item{
                will-change: transform;
                display: flex;
                flex-direction: row;
                .ad-med-image{
                    min-width: 102px;
                    height: 90px;
                    img {
                        width: 102px;
                        height: 90px;
                    }
                }
                .ad-med-car-info{
                    min-width: 132px;
                    height: 90px;
                }
                &.move{
                    animation: moveSlideshow 2s ease-in ;
                }
            }
        }
        .ad-med-carousel-next{
            min-width: 40px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #00000040;
            cursor: pointer;
        }
    }

this.ref('carousel-next').addEventListener('click',this.nextCarousel);
    nextCarousel(){
    
    const player1 = this.ref('image1').animate([
      {transform: `translateX(0)`},
      {transform: 'translateX(-100%)'}
    ],{duration:1000,easing:'cubic-bezier(0,0,0.32,1)'});
    const player2 = this.ref('image2').animate([
      {transform: `translateX(0)`},
      {transform: 'translateX(-100%)'}
    ],{duration:1000,easing:'cubic-bezier(0,0,0.32,1)'});
    player1.addEventListener('finish',
    this.tidyUpAnimations);
  }
  tidyUpAnimations(event){
    const src1 = this.ref('srcimage1').src;
    const src2 = this.ref('srcimage2').src;
    const src3 = this.ref('srcimage3').src;
    this.ref('srcimage1').src = src2;
    this.ref('srcimage2').src = src3;
    this.ref('srcimage3').src = src1;

    const innerText1 = this.ref('car-info1').innerText;
    const innerText2 = this.ref('car-info2').innerText;
    const innerText3 = this.ref('car-info3').innerText;
    this.ref('car-info1').innerText = innerText2;
    this.ref('car-info2').innerText = innerText3;
    this.ref('car-info3').innerText = innerText1;
  }