style

.swiper-learn-wrapper{
    overflow: hidden;
    padding: rem-calc(25px) rem-calc(15px);
    position: relative;

 
}

.swiper-learn{
    opacity: 0;
    transition: all ease 500ms;


    &.not-slider{
        opacity: 1;
        .swiper-wrapper{
            justify-content: center;

            .swiper-slide{
                opacity: 1;
            }
        }

        .swiper-button-prev,
        .swiper-button-next{
            display: none;
        }
     
      }
  

    &.swiper-initialized{
        opacity: 1;
    }
    .swiper-slide{
        height: auto !important;
        // margin:  rem-calc(7px) 0;
        // padding: 15px;
        opacity: 0;
        transition: all ease 500ms;

        &.swiper-slide-visible{
            opacity: 1;
        }
    }

    .swiper-button-prev,
    .swiper-button-next{
        transform: translateX(-50%) rotate(90deg);
        left: 50%;
        right: auto;
        margin: 0;
        height: auto;
        transform-origin: center;
        &:hover{
            &:after{
                color:$secondary;
            }
        }
        &:after{
            font-size: rem-calc(25px);
            color: $primary;
        }
    }

    .swiper-button-prev{
        top: rem-calc(-5px);
       
      
    }

    .swiper-button-next{
        bottom:rem-calc(-5px);
        top: inherit;
  
    }   
}

.learnCard {
    display: flex;
    border-radius: rem-calc(7px) 0 0 rem-calc(7px);
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.05);
    overflow: hidden;


    &__image {
        max-width: rem-calc(220px);
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        position: relative;
        &:after{
            background : linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            width: rem-calc(160px);
        }

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }


    &__content {
        padding: rem-calc(29px 22px);
    }

    &__title {
        font-size: rem-calc(19px);
        font-weight: bold;
        color: #2D2D2D;
    }

    &__desc {
        color: #2D2D2D;
        font-size: rem-calc(16px);
        line-height: 1.1;
    }


}

swiper

<?php

$title = $args['title'];
$text = $args['text'];
$link = $args['link'];
$list = $args['list'];
$class = $args['class'];

?>

<div id="<?php echo $class ?>" class="row learnRow">
    <div class="col-6">
        <div class="learnIntro">
            <h3 class="title"><?php echo $title; ?></h3>
            <p><?php echo $text; ?></p>
            <?php display_link($link); ?>
        </div>
    </div>

    <div class="col-6">
        <div class="swiper-learn-wrapper">
            <div class="swiper-learn">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <?php
                    foreach ($list as $row) { ?>
                        <div class="swiper-slide">
                            <div class=" learnCard light-bloc effet-shadow">

                                <div class="learnCard__image">
                                    <?php if (!empty($row['image'])) {
                                        echo wp_get_attachment_image($row['image'], array('220', '160'), false, array("class" => "img-fluid"));
                                    } else {
                                        echo '<img src="' . get_template_directory_uri() . '/src/images/placeholder-listeCourse.jpg" alt="placeholder" class="' . $attr['class'] . '">';
                                    }
                                    ?>
                                </div>

                                <div class="learnCard__content">
                                    <h2 class="learnCard__title"><?php echo $row['title'] ?></h2>
                                    <p class="learnCard__desc"><?php echo $row['text'] ?></p>
                                </div>

                            </div>
                        </div>
                    <?php }; ?>
                </div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
</div>

swiper-vertical

  const sliderLearn = document.querySelectorAll('.swiper-learn-wrapper');

  if (sliderLearn) {
    sliderLearn.forEach(sliderWrapper => {

      const slider = sliderWrapper.querySelector('.swiper-learn');
      const nbrSlide = sliderWrapper.querySelectorAll('.swiper-slide').length;
      const slidesPerView = 3;
      if ( nbrSlide < slidesPerView ) {
        slider.classList.add('not-slider')
        
      }else{
            
      const next = sliderWrapper.querySelector('.swiper-button-next');
      const prev = sliderWrapper.querySelector('.swiper-button-prev');

      new Swiper(slider, {
        modules: [Navigation, Autoplay],
        loop: false,
        slidesPerView: slidesPerView,
        spaceBetween: 15,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
    
        direction: 'vertical',
        navigation: {
          nextEl: next,
          prevEl: prev,
        },
 
        // maxBackfaceHiddenSlides: 3,


        on: {
          init: function () {
            if ( this.params.direction === 'vertical' ) {
          
              let
                slides = Array.from( this.wrapperEl.children ),
                height = slides.reduce( function ( val, node ) {

                  let height = node.children[0].getBoundingClientRect().height;
                  return ( height > val ) ? height : val;
                }, 0 ),
                result = height * this.params.slidesPerView + ( this.params.spaceBetween * ( this.params.slidesPerView  - 1) ) ;
        
              this.el.style.height = result +'px';

              // console.log( this.el );
          
              this.update( true );
            } else {
              this.el.style.height = null;
              this.update( true );
            }
          },
        },

  
      })
      }
 

    });

  }