Простой способ установить расстояние в горизонтальном слайдере

89
7

Как вы можете видеть в этом скрипте, между элементом слайда и элементом правой стрелки существует неудобное расстояние, это расстояние фактически изменяется по мере изменения размера браузера.

Как мне избавиться от этого интервала и сделать все плотно сложенным?

Обратите внимание, что я не хочу, чтобы ширина обертки (целостного слайдера) была исправлена (я хочу, чтобы она была относительной), потому что я хочу видеть весь слайдер, даже когда браузер становится меньше. Тем не менее, я хочу, чтобы каждый элемент слайда имел фиксированную ширину.

Я попытался добавить в CSS следующее: это не поможет.

.next-slide, .prev-slide {
padding-right: -1px;
margin-right: -1px;
}

спросил(а) 2021-01-19T16:29:04+03:00 6 месяцев, 2 недели назад
1
Решение
133

Для достижения ожидаемого использования ниже

Обновить ширину предыдущей и следующей секций слайдов до 54 пикселей

.next-slide,.prev-slide {background: black; display: block; ширина: 54 пикселей;

Увеличьте запас справа для вкладки -container до 53 пикселей

.wrapper.tab -container {margin: 0 53px;

3.Tab контейнер ли заполнение право на 24px

.wrapper .tab-container li {
font: normal 14px 'Arial';
background: lightgrey !important;
margin: 0 !important;
padding: 15px 24px;

CSS:

.wrapper {
overflow: hidden;
width: 100%;
background: grey;
position: relative;
height: 50px;
margin-top: 15px;
}

.next-slide,
.prev-slide {
background: black;
display: block;
width: 54px;
height: 50px;
position: absolute;
top: 0;
color: white;
text-align: center;
line-height: 3em;
cursor: pointer;
transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
-webkit-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
-moz-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
z-index: 2;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.next-slide{
right: 0;
}

.wrapper .tab-container {
margin: 0 53px;
padding: 0;
position: absolute;
top: 0;
left: 0;
height: 50px;
transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
-moz-transition: left .3s ease-in-out;
}

.wrapper .tab-container li {
font: normal 14px 'Arial';
background: lightgrey !important;
margin: 0 !important;
padding: 15px 24px;
list-style: none;
float: left;
border-right: 1px solid #fff;
height: 50px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
cursor: pointer;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.wrapper .tab-container li a {
background-image: none !important;
padding-left: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
color: #222;
}

.wrapper .tab-container li a span {
background-image: none !important;
/*background-repeat: 0 !important;*/
background-position: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.wrapper .tab-container li.here,
.wrapper .tab-container li.here a {
font-weight: normal !important;
color: #00ac7f !important;
}

https://jsfiddle.net/Nagasai_Aytha/dd4h4uch/5/

ответил(а) 2021-01-19T16:29:04+03:00 6 месяцев, 2 недели назад
45

Надеюсь, я не неправильно истолковал ваши ожидания, но я полагал, что вы имеете в виду, что, если вы уменьшаете и расширяете свой браузер, вы увидите, что последний слайд появляется и исчезает в зависимости от того, полностью ли он вписывается в видимую область, а некоторые количество серых фоновых пространств всегда видно. Для этого я сделал следующее:

    Swapped float: left на слайдах для display: inline-block

    Чтобы затем .tab-container лишние пробелы, появляющиеся между ними, добавьте font-size: 0 в .tab-container (размер шрифта установлен на каждом li чтобы это только удаляло нежелательные пробелы)

    Чтобы предотвратить разрывы строк, добавьте white-space: nowrap в .tab-container. (В инструментах разработчика вы можете видеть, что элементы, не относящиеся к фитингу, переходили к следующей строке)

ответил(а) 2021-01-19T16:29:04+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема