Получите логотипы нужного размера в карусели - PullRequest
Новая
       57

Получите логотипы нужного размера в карусели

0 голосов
/ 11 января 2020

Я пытаюсь добиться автоматического c изменения размеров логотипов различных брендов для веб-сайта компании, который я разрабатываю, внутри Собственной карусели . Идея в том, чтобы каждый lo go имел разумный размер.

Большинство логотипов представлены в форматах SVG и доступны по номеру https://wetransfer.com/downloads/44eb123d186e30519edc2d025dafd03420200110231646/112373 (на неделю): как вы видите, они имеют широкий диапазон соотношения высоты и ширины, поэтому при использовании фиксированная ширина и соблюдение правильного соотношения сделали некоторые из них (логотипы CNRS и CEA) слишком высокими.

Цель (взято из случайный сайт ): Цель

Что я получил: Что я получил

Мой код (HTML, затем CSS на основе Bootstrap 4, затем JS фрагмент, использующий сову-карусель): 

     <div class="site-section">
        <div class="container">
          <div class="row justify-content-center text-center mb-5">
            <div class="col-md-5">
              <h2 class="section-heading">Ils nous ont fait confiance</h2>
            </div>
          </div>
          <div class="row justify-content-center text-center">
            <div class="col">
              <div class="owl-carousel clients-carousel">
                <img src="./img/clients/airbus-group.svg" class="client-logo limit-width" />
                <img src="./img/clients/safran-group.png" class="client-logo limit-width" />
                <img src="./img/clients/cnrs-fr.svg" class="client-logo limit-height" />
                <img src="./img/clients/cea-fr.svg" class="client-logo limit-height" />
                <img src="./img/clients/bic.svg" class="client-logo limit-width" />
                <img src="./img/clients/edf.svg" class="client-logo limit-width" />
                <img src="./img/clients/horiba.svg" class="client-logo limit-width" />
                <img src="./img/clients/jenoptec-group.svg" class="client-logo limit-width" />
                <img src="./img/clients/otis.svg" class="client-logo limit-width" />
                <img src="./img/clients/thales.svg" class="client-logo limit-width" />
              </div>
            </div>
          </div>
        </div>
      </div>

.clients-carousel .owl-stage-outer, .clients-carousel .owl-stage, .clients-carousel .owl-item {
  display: flex;
}
.clients-carousel .owl-item {
  margin-left: 1rem;
  margin-right: 1rem;
}
.clients-carousel .owl-item img.client-logo {
  width: 15em;
  height: auto;
}

var siteOwlCarousel = function() {
    $('.clients-carousel').owlCarousel({
          center: true,
        items: 3,
        loop: true,
        margin: 0,
        autoplay: true,
        smartSpeed: 1000,
      nav:false,
      dots:false,
      autoWidth:true,
      responsive: {
        // breakpoint from 0 up
        0 : {
          items: 3
        },
        // breakpoint from 576 up
        576 : {
          items: 3
        },
        // breakpoint from 768 up
        768 : {
          items: 4,
          center: false
        },
        992 : {
          items: 4,
          center: false
        },
        1200 : {
          items: 4,
          center: false
        }
      }
        });
  };
  siteOwlCarousel();

У кого-нибудь есть идея, основанная на Flexbox?

Заранее спасибо!

choumat

1 Ответ

0 голосов
/ 11 января 2020

Изменить .owl-wrapper свойство отображения и owl-item display, float, свойства выравнивания по вертикали и установить на max- width & высота размер.

Надеюсь, приведенный ниже фрагмент поможет вам. 

var siteOwlCarousel = function() {
  $('.clients-carousel').owlCarousel({
    center: true,
    items: 3,
    loop: true,
    margin: 10,
    autoplay: true,
    smartSpeed: 1000,
    nav: false,
    dots: false,
    autoWidth: true,
    responsive: {
      0 : {
        items: 2
      },
      576 : {
        items: 3
      },
      768 : {
        items: 4
      },
      992 : {
        items: 4
      },
      1200 : {
        items: 4
      }
    }
  });
};
siteOwlCarousel();
.owl-carousel .owl-wrapper {
  display: table!important;
}
.owl-carousel .owl-item {
  display: table-cell!important;
  float: none!important;
  vertical-align: middle!important;
}
.clients-carousel .owl-item .item{
  text-align: center!important;
  padding: 15px 30px!important;
}
.clients-carousel .owl-item img{
  max-width: 180px!important;
  max-height: 50px!important;
  display: inline-block!important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="site-section">
  <div class="container">
    <div class="row justify-content-center text-center mb-5">
      <div class="col-md-5">
        <h2 class="section-heading">Ils nous ont fait confiance</h2>
      </div>
    </div>
    <div class="row justify-content-center text-center">
      <div class="col">
        <div class="owl-carousel clients-carousel">
          <div class="item"><img src="./img/clients/airbus-group.svg"></div>
          <div class="item"><img src="./img/clients/safran-group.png"></div>
          <div class="item"><img src="./img/clients/cnrs-fr.svg"></div>
          <div class="item"><img src="./img/clients/cea-fr.svg"></div>
          <div class="item"><img src="./img/clients/bic.svg"></div>
          <div class="item"><img src="./img/clients/edf.svg"></div>
          <div class="item"><img src="./img/clients/horiba.svg"></div>
          <div class="item"><img src="./img/clients/jenoptec-group.svg"></div>
          <div class="item"><img src="./img/clients/otis.svg"></div>
          <div class="item"><img src="./img/clients/thales.svg"></div>
        </div>
      </div>
    </div>
  </div>
</div>
...