Сжатие дочернего элемента относительно положения, когда родитель / браузер сокращается, с parrent, используя переполнение - PullRequest
Новая
       27

Сжатие дочернего элемента относительно положения, когда родитель / браузер сокращается, с parrent, используя переполнение

0 голосов
/ 23 января 2019

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

Отображается только часть изображений (container), а div, содержащий все изображения (items), перемещается влево / вправо с помощью JavaScript.

Можно уменьшить изображения, если окно браузера уменьшится the container станет меньше

Количество изображений (item) не фиксировано. 

.carousel {
  max-width: 70%;
  margin: 1.5rem 1.5rem 0 1.5rem;
  position: relative; }
  .container {
    margin: 0;
    padding: 1rem 0;
    position: relative;
    overflow: hidden; }
  .items {
    display: flex;
    flex-direction: row;
    left: 0;
    position: relative;
    top: 0;
    transition: 0.2s; }
  .item {
    cursor: pointer;
    height: 9.375rem;
    padding: 0.5rem;
    transition: 0.2s;
    width: 9.375rem; 
 }
<div class="carousel" >
    <div class="container">
        <div class="items">
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
            <div class="item" data-carousel-item="">
                    <img src="https://via.placeholder.com/100"/>
            </div>
         </div>
   </div>       
</div>

1 Ответ

0 голосов
/ 24 января 2019

В настоящее время вы используете rem в качестве квантификатора, который основан на размере шрифта вашего корневого элемента, но я не вижу, чтобы вы что-то настраивали в отношении шрифтов на основе медиа-запросов. Если вам не нужны точные измерения, например, 100x100, я бы рекомендовал вместо этого использовать квантификаторы области просмотра, поскольку эти значения меняются при уменьшении размера вашего браузера. Я добавил свойство flex-wrap для внешности, вы можете удалить его и добавить переполнение, если хотите 

<meta name="viewport" content="width=device-width,initial-scale=1.0">
.carousel {
  max-width: 70%;
  margin: 1vw 1vw 0 1vw;
  position: relative; }
  .container {
    width:100%;
    margin: 0;
    padding: 1vw 0;
    position: relative; }
  .items {
    display: flex;
    flex-direction: row;
    flex-wrap : wrap;
    left: 0;
    position: relative;
    top: 0; }
  .item img {
    cursor: pointer;
    height: 10vw;
    margin:1vw;
    transition: 0.2s;
    width: 10vw; 
 }

Демонстрация скрипки

...