2 строки карусели аватары первого ряда описания второго ряда с разными

ProgramBox

2 строки карусели аватары первого ряда описания второго ряда с разными

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#html #jquery #css #carousel #owl-carousel

Вопрос:

Я хочу такую карусель, как эта

Я пытаюсь использовать карусель с совой, но это выглядит так:

Моя проблема только в ширине первого и второго ряда.

Я хочу, чтобы первая строка была размером 1200 пикселей, а вторая-100%, но одна карусель

Мой код:

 $('#slide-testimonal_texts').owlCarousel({
        margin: 0,
        center: true,
        loop: true,
        nav: true,
        responsive: {
        0: {
           items: 1
        },
        768: {
           items: 2,
        margin: 15,
        },
        1000: {
           items: 5,
        }
          }
      });

 body {
        background: #F1F7FF;
    }
    
    
    .testimonials {
        position: relative;
    }
    .inner-testimonials .owl-dots {
        display: none;
    }
    .custome_slide.owl-carousel .owl-item.active.center .main-reviewimage {
        border: 2px solid #fff;
    }
    .main-reviewimage {
        width:80px;
        height:80px;
        border-radius: 100%;
        text-align: center;
    }
    .main-reviewimage img {
        opacity: 0.3;
    }
    .active.center .main-reviewimage img {
        opacity: 1;
    }
    .test_img {
        position: relative;
        opacity: 1;
        -webkit-transition: .4s ease all;
        transition: .4s ease all;
        margin: 0 auto;
        margin-top: 20px;
    }
    .inner-testimonials {
        width: 100%;
        margin: 0 auto;
    }
    
    .custome_slide {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .owl-prev {
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 5%;
        margin-left: -50px;
    }
    
    .owl-next {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 5%;
        margin-right: 100px;  
    }
    
    .custome_slide.owl-carousel .owl-item {
        padding: 10px 20px;
    }
    
    #slide-testimonal .center .test_img:before {
        content: none;
        transition: 0.7s ease-in-out;
    }
    .test_img img {
        border-radius: 100%;
        overflow: hidden;
        margin: 0 auto;
        height: 100%;
        object-fit: cover;
    }
    body {
        font-family: tahoma;
    }
    
    .owl-carousel .owl-stage-outer {
        height: 500px;
    }
    .custome_slide.owl-carousel .owl-item.active.center {
        transform: scale(1.3);
        margin-top: 0 !important;
        position: relative;
        z-index: 999;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .custome_slide.owl-carousel .owl-item {
        transform: scale(1);
        padding: 10px 0px;
        transition: all 0.5s;
        
    }
    .testimonial_detail {
        text-align: left;
    }
    .testimonial_detail {
        width: 420px;
        position: relative;
        left: -40px;
        top: 120px;
        background-color: #fff;
         border-radius: 10px;
         padding-bottom: 15px;
         opacity: 0.5;
    }
    
    .center .testimonial_detail {
        opacity: 1;
    }
    
    .testimonial_detail h4 {
        font-size: 16px;
        margin: 0;
    }
    .testimonial_detail p {
        color: #ccc;
        font-size: 14px;
    }
    
    .avatar_title {
        padding: 14px 20px 5px;
        border-bottom: 1px solid #f1f7ff;
    }
    
    .main-reviewimage h5 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .testimonial_detail p {
        padding: 0 20px;
    }
    
    .clear {
        clear: both;
    }
    
    .testimonial_detail img {
        width: 60px !important;
        height: 60px;
        float: left;
        margin-right: 12px;
    }
    
    .titles span {
        font-size: 14px;
    }
    /*
.custome_slide.owl-carousel .active .testimonial_detail {

}
*/

.custome_slide.owl-carousel .active.center .testimonial_detail {
    display: block !important;
}

@media only screen and (max-width:767px){
 .main-reviewimage {
   height: 400px;
   width: 425px;
   margin: 0 auto;
   display: block;
 }
 .testimonial_detail {
   left: inherit;
   width: 100%;
 }
}

 <link rel="stylesheet" type="text/css" href="http://www.24limousine.com/wp-content/themes/24Limousine/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="cao.css">
    
    
    <section class="testimonials">
       <div class="inner-testimonials">
    
          
          <div class="owl-carousel custome_slide second" id="slide-testimonal_texts">
        
            <div class="test_img">
    
                <div class="main-reviewimage">
                    <img src="img/ahmet-zd.png" alt="">
                    <h5>Dr. Best Trader 5</h5>
                    <span>@drbesttrader</span>
                 </div>
    
               <div class="testimonial_detail">
                  <div class="avatar_title">
                   <img src="img/ahmet-zd.png" alt="">
                   <div class="titles">
                       <span><strong>Dr. Best Trader 1</strong></span><br>
                       <span>@drbesttrader</span>
                   </div>
                   <div class="clear"></div>
                  </div>
                  
                  <p>#LRC $LRC<br><br>
    
                    Duis eu finibus nisi. In hac habitasse platea dictumst. Donec mi ante, hendrerit quis nunc id, volutpat efficitur lacus. Nullam dignissim enim in purus rutrum imperdiet eu vel arcu. .<br><br>
                    
                  Nullam dignissim enim in purus rutrum imperdiet eu vel arcu. </p>
               </div>
            </div>
           
            <div class="test_img">
    
                <div class="main-reviewimage">
                    <img src="img/ahmet-zd.png" alt="">
                    <h5>Dr. Best Trader 5</h5>
                    <span>@drbesttrader</span>
                 </div>
            
               <div class="testimonial_detail">
                  <div class="avatar_title">
                   <img src="img/ahmet-zd.png" alt="">
                   <div class="titles">
                       <span><strong>Dr. Best Trader 1</strong></span><br>
                       <span>@drbesttrader</span>
                   </div>
                   <div class="clear"></div>
                  </div>
                  
                  <p>Perfect for what i needed. Found my Lenders almost instantly. who use again.</p>
               </div>
            </div>
    
    
            <div class="test_img">
    
                <div class="main-reviewimage">
                    <img src="img/ahmet-zd.png" alt="">
                    <h5>Dr. Best Trader 5</h5>
                    <span>@drbesttrader</span>
                 </div>
            
               <div class="testimonial_detail">
                  <div class="avatar_title">
                   <img src="img/ahmet-zd.png" alt="">
                   <div class="titles">
                       <span><strong>Dr. Best Trader 1</strong></span><br>
                       <span>@drbesttrader</span>
                   </div>
                   <div class="clear"></div>
                  </div>
                  
                  <p>Perfect for what i needed. Found my Lenders almost instantly. who use again.</p>
               </div>
            </div>
    
            <div class="test_img">
    
                <div class="main-reviewimage">
                    <img src="img/ahmet-zd.png" alt="">
                    <h5>Dr. Best Trader 5</h5>
                    <span>@drbesttrader</span>
                 </div>
         
               <div class="testimonial_detail">
                  <div class="avatar_title">
                   <img src="img/ahmet-zd.png" alt="">
                   <div class="titles">
                       <span><strong>Dr. Best Trader 1</strong></span><br>
                       <span>@drbesttrader</span>
                   </div>
                   <div class="clear"></div>
                  </div>
                  
                  <p>Perfect for what i needed. Found my Lenders almost instantly. who use again.</p>
               </div>
            </div>
    
    
            <div class="test_img">
    
                <div class="main-reviewimage">
                    <img src="img/ahmet-zd.png" alt="">
                    <h5>Dr. Best Trader 5</h5>
                    <span>@drbesttrader</span>
                 </div>
            
               <div class="testimonial_detail">
                  <div class="avatar_title">
                   <img src="img/ahmet-zd.png" alt="">
                   <div class="titles">
                       <span><strong>Dr. Best Trader 1</strong></span><br>
                       <span>@drbesttrader</span>
                   </div>
                   <div class="clear"></div>
                  </div>
                  
                  <p>Perfect for what i needed. Found my Lenders almost instantly. who use again.</p>
               </div>
            </div>          
    
       </div>
    </section>
    
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.24limousine.com/wp-content/themes/24Limousine/assets/js/owl.carousel.min.js"></script>
    <script src="cao.js" type="text/javascript"></script>

Я просмотрел все примеры каруселей, но не смог найти ни одного подобного. Нажатие на стрелки будет скользить одновременно, но ширина будет другой.

Метки: 2 строки карусели аватары первого ряда описания второго ряда с разными

Вопрос:

Вам также может понравиться

oauth2client теперь устарел

Сбой фильтра API GA: недопустимое значение ‘ga: userGender == female’ для параметра filters. «

Java Nashorn: абстрактный класс в JS возвращается к функции JS?