Я столкнулся с проблемой при работе со слайдером Flickity; Дело в том, что слайдер сидит там просто идеально, как я хотел … но … После того, как я скользю, он слишком сильно уходит влево и оставляет много места позади; Я посмотрел в код ничего не приходит; Может быть, есть проблема с настройками слайдера?

{amp}lt;div class='carousel-section'{amp}gt; {amp}lt;div class='carousel-wrapper'{amp}gt; {amp}lt;h2{amp}gt; Some Clients About us {amp}lt;/h2{amp}gt; {amp}lt;div class="carousel "{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.” {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; {% inline_text field="client_name" value="{{ module.client_name }}" %} {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;{% inline_text field="client_position" value="{{ module.client_position }}" %} {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.” {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; {% inline_text field="client_name" value="{{ module.client_name }}" %} {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;{% inline_text field="client_position" value="{{ module.client_position }}" %} {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.” {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; {% inline_text field="client_name" value="{{ module.client_name }}" %} {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;{% inline_text field="client_position" value="{{ module.client_position }}" %} {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.” {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; {% inline_text field="client_name" value="{{ module.client_name }}" %} {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;{% inline_text field="client_position" value="{{ module.client_position }}" %} {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.” {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; {% inline_text field="client_name" value="{{ module.client_name }}" %} {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;{% inline_text field="client_position" value="{{ module.client_position }}" %} {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; “Blue Label cared about the project is if it were their own. Showed a great interest in helping our company succeed. Would highly recommend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.” {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; {% inline_text field="client_name" value="{{ module.client_name }}" %} {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;{% inline_text field="client_position" value="{{ module.client_position }}" %} {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell"{amp}gt; {amp}lt;div class="carousel-cell-image"{amp}gt; {% if module.third.src %} {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %} {% if module.third.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.third.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %} {% endif %} {amp}lt;img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}{amp}gt; {% endif %}{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-text"{amp}gt; {amp}lt;p{amp}gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="carousel-cell-clientinfo"{amp}gt; {amp}lt;h5{amp}gt; LOREM {amp}lt;/h5{amp}gt; {amp}lt;h6{amp}gt;IPSUM {amp}lt;/h6{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

CSS:

  .carousel-section{ width:100%; height:90vh; font-family: 'Montserrat', sans-serif; background-color:#DFE6E9; border-top:1px solid #c8cfd1; display:flex; flex-direction:column; } .carousel-wrapper{ width:100%; height:90vh; font-family: 'Montserrat', sans-serif; background-color:#DFE6E9; border-top:1px solid #c8cfd1; display:flex; flex-direction:column; padding-left:10rem; padding-top:5rem; position:relative; } .carousel { background: #DFE6E9; margin-bottom:4rem; position:absolute; top:10rem; left:0; width:100%; padding-left:10rem; } .carousel-cell { width: 25%; height: 330px; margin-right: 10px; display:flex; flex-direction:column; background: #DFE6E9; padding:0 1rem 1rem 1rem; align-items:flex-start; border-right:1px solid #c8cfd1; } /* cell number */ .carousel-cell:before { display: block; text-align: center; line-height: 200px; font-size: 80px; color: white; } .button { font-size: 22px; } .button-group { margin-bottom: 20px; } .carousel-cell-text p{ font-size:.8rem; padding-right:2rem; margin-top:2rem; line-height:1.4rem; } .carousel-cell-clientinfo h5{ margin-top:1.2rem; } .carousel-cell-clientinfo h6{ font-size:.8rem; font-weight:lighter; margin-top:.5rem; } направо  .carousel-section{ width:100%; height:90vh; font-family: 'Montserrat', sans-serif; background-color:#DFE6E9; border-top:1px solid #c8cfd1; display:flex; flex-direction:column; } .carousel-wrapper{ width:100%; height:90vh; font-family: 'Montserrat', sans-serif; background-color:#DFE6E9; border-top:1px solid #c8cfd1; display:flex; flex-direction:column; padding-left:10rem; padding-top:5rem; position:relative; } .carousel { background: #DFE6E9; margin-bottom:4rem; position:absolute; top:10rem; left:0; width:100%; padding-left:10rem; } .carousel-cell { width: 25%; height: 330px; margin-right: 10px; display:flex; flex-direction:column; background: #DFE6E9; padding:0 1rem 1rem 1rem; align-items:flex-start; border-right:1px solid #c8cfd1; } /* cell number */ .carousel-cell:before { display: block; text-align: center; line-height: 200px; font-size: 80px; color: white; } .button { font-size: 22px; } .button-group { margin-bottom: 20px; } .carousel-cell-text p{ font-size:.8rem; padding-right:2rem; margin-top:2rem; line-height:1.4rem; } .carousel-cell-clientinfo h5{ margin-top:1.2rem; } .carousel-cell-clientinfo h6{ font-size:.8rem; font-weight:lighter; margin-top:.5rem; } 

Код находится в системе CMS, так что это откуда модули; Кроме того, есть два файла из ползунка Flickity (css и javascript), подключенные к этому модулю в качестве стандартной библиотеки;

javascript - проблема Flickity Slider с пробелом после последнего слайда, слайдер продолжает вращаться

Здесь видно, что справа осталось слишком много пустого пространства, прежде чем в какой-то момент слайдеру пришлось прекратить прокрутку, чтобы слайды заняли весь раздел, но это не останавливает … В этом проблема …

Попробуйте установить ширину родительского слайдера. Моим лучшим предположением здесь будет карусель, так как кнопки расположены в этом контейнере. Или просто ограничьте размер контейнера карусели тем, что вы когда-либо использовали для позиционирования. Пример CSS Grid minmax (100%, 400 пикселей)

FUBAR

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,