<div class="swiper mySwiper">
    <div class="swiper-wrapper">

    </div>
   
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>

<script>
$( document ).ready(function() {

$('.t958__item').each(function(){
    let name =  $(this).find('.t958__author-name').text();
    let title = $(this).find('.t958__author-descr').text();
    let link =  $(this).find('.t958__review-text').text();
    
    let sldElem = `
    <div class="swiper-slide">
            <div class="sld-wrap">
                    <div class="sld-back">
                        
                        <div class="sld-back-title">${title}</div>
                        <div class="sld-back-name">${name}</div>
                    </div>
                    
                    <div class="sld-front">
                        <div class="sld-front-name">${name}</div>
                        <div class="sld-front-title">${title}</div>
                        <div class="sld-front-line"></div>
                        <div class="sld-front-btn"><a href="${link}">Подробнее</a></div>
                    </div>
                    
            </div>
    </div>
    `;
    
$('.swiper-wrapper').append(sldElem);
    
});

let swiper = new Swiper(".mySwiper", {
        slidesPerView: 'auto',
        initialSlide: 4,
        centeredSlides: true,
        spaceBetween: 15,
        grabCursor: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        }
});
      
//Активируем центральный слайд
function centerSld(){
    let wh = $(window).width();
    let translate = swiper.getTranslate();
    let slce = 0;
    if(wh>660){ slce = 165 }else{ slce = 105 };
    swiper.translateTo( translate-slce , 300, true, true)
    $('.swiper-slide.swiper-slide-active').addClass('center-slide');
};
      
//При клике на слайд      
$('.swiper-slide').click(function(e) { e.preventDefault();
    //Определяем номер слайда и удаляем класс центральной ширины
    let ind = $(this).index();
    $('.swiper-slide').removeClass('center-slide');
    
    //Обновляем размеры и переходим к нужному слайду
    setTimeout(function () {
        swiper.update();
        swiper.slideTo( ind ,300, false );    
    }, 400);
});

//Отслеживаем перетаскивание слайдера
swiper.on('sliderFirstMove', function () {
  $('.swiper-slide').removeClass('center-slide');
  
});

swiper.on('touchEnd', function () {
   //Включаем класс центральной ширины и делаем корректор смещения
    setTimeout(function () {
         centerSld();
    }, 800);
});

//Активируем центральный слайд при загрузке страницы
setTimeout(function () {
        centerSld();
}, 800);

});   
</script>
    
    
<style>
.uc-text-base{ display:none};


 html,
      body {
        position: relative;
        height: 100%;
      }

.swiper {
    width: 100%;
    height: 475px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
     font-family: 'Montserrat',Arial,sans-serif;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-slide {  width: 30px}
.swiper-slide.swiper-slide-active { width: auto}
.sld-wrap{
    transition: width 0.3s ease-in-out;
    width: 30px;
    height: 100%;
    overflow: hidden;
}
.swiper-slide.center-slide .sld-wrap{ 
    width: 360px;
    transform: translateX(-15px);
}

.sld-front {display: none}
.sld-back {
font-size: 14px;
    display: flex;
    transform-origin: 0 0;
    transform: rotateZ(90deg) rotateX(0deg);
    height: 30px;
    align-items: center;
    background-color: #d79e47;
    background-image: linear-gradient(90deg, #edcc93 20%, #d79e47);
    position: absolute;
    left: 30px;
    top: 0;
    width: 475px;
    transition: all 0.4s ease-in-out;
    transition-property: transform,-webkit-transform,-moz-transform,-o-transform;
    will-change: transform;
}
.center-slide .sld-back {
    transform: rotateZ(90deg) rotateX(90deg);
}

.sld-back div {
    width: 50%;
    transform: rotate(-180deg);
}

.sld-back-name {
    text-align: left;
    padding-left: 15px;
}

.sld-back-title {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    padding-right: 20px;
}

.sld-front {
    display: flex;
    background-color: #d79e47;
    background: linear-gradient(90deg, rgba(215,158,71,1) 0%, rgba(237,204,147,1) 22%, rgb(239 219 184) 39%, rgb(245 195 115) 56%, rgb(255 222 164) 78%);
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 30px);
    margin-left: 30px;
    transition: all 0.4s ease-in-out;
    will-change: transform;
    transform-origin: 0 50%;
    -webkit-transform: perspective(2000px) rotateY(90deg);
    -moz-transform: perspective(2000px) rotateY(90deg);
    transform: perspective(3000px) rotateY(90deg);
    background-position: 100% 0;
    background-size: 200% 200%;
    padding: 0 10px;
    box-sizing: border-box;
}

.sld-front-name {
    height: 100px;
    font-size: 20px;
}

.sld-front-title {
    height: 90px;
    font-size: 24px;
    font-weight: 600;
}

.sld-front-line {
    height: 1px;
    background-color: #000;
    width: 50%;
}

.sld-front-btn {
    height: 50px;
    margin-top: 50px;
}

.sld-front-btn a:hover { background-color: #505050}

.sld-front-btn a {
    display: inline-block;
    padding: 10px 30px;
    color: #fff !important;
    background-color: #000;
    border-radius: 10px;
    transition: al 0.3s ease-in-out;
}


.center-slide .sld-front {
    -webkit-transform: perspective(3000px);
    -moz-transform: perspective(3000px);
    transform: perspective(3000px);
    background-position: 0 0;
    /* margin-left: 15px; */

}

.sld-back:hover {
    background-image: linear-gradient(90deg, #e5a342 20%, #d79e47);
}

.center-slide .sld-front div {  opacity: 1}

.sld-front div {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width:660px){
.swiper { height: 315px}

.sld-back {
    width: 315px;
    font-size: 11px;
}   
.sld-back-title { font-size: 12px}

.sld-front-name {
    height: 50px;
    font-size: 16px;
}
.sld-front-title {
    height: 65px;
    font-size: 20px;
}
.sld-front-btn {
    height: 50px;
    margin-top: 45px;
}
.sld-front-btn a {
    display: inline-block;
    padding: 8px 25px;
    font-size: 14px;

}
.swiper-slide.center-slide .sld-wrap { width: 240px}
}


</style>