Я всё время для создания слайдеров использую swiper js, такой возник вопрос, прикрепляю картинку
у меня в слайдере идёт такая структура, на всю ширину видимой области идёт картинка , потом небольшой блочёк с текстом и внутри этого блока должна быть пагинцаия, я сделал все элементы всё работает, но встал вопрос, а как туда засунуть пагинацию, подгонка не подходит т.к. я это всё дело потом буду натягивать на wp. Если есть идее будет круто
Дополнительно:
подгонка не подходит т.к. я это всё дело потом буду натягивать на wp
ЧЕГО? Какая связь между пагинацией и wp?
Wispik, я имею ввиду что можно пагинацию (я выделил ее жёлтым на картинке) подогнать с помощью position но тогда если редактор введёт текста больше, то блок расширится и пагинация залезет на тест. Вы возможно не сталкивались с wp, и не знаете как это работает
starkingdom, вы же понимаете, что пагинация не может быть частью слайда? Или нет? И вы уверены, что это нормально, что она будет прыгать по высоте от слайда к слайду?
starkingdom, c wp то я работал, поэтому я и спросил в чем связь)) Любая верстка, по хорошему, должна делаться изначально с учетом разного контента. Ну да ладно, без кода, я думаю, тут вряд ли кто ответит, вопрос слишком абстрактный, ну это чисто мое мнение
Ankhena, Wispik, я понимаю все данные нюансы, потому и спрашиваю, есть ли какой-то вариант, я же не первый к кому пришел такой дизайн с таким слайдером
starkingdom, конечно, у вас не первый дизайнер, который плохо себе представляет, как неудобно, когда точки прыгают. Поэтому, в реальной жизни они прибиваются куда-нибудь фиксированно. Обычно к нижнему краю.
Если все таки прыгать, то а js определяйте положение и меняйте (через кастомное свойство css поудобнее)
Ankhena, это печально, не люблю делать костыли...
starkingdom, я бы и не стала так делать :)
Ankhena, ну я думаю щас сделаю, так сказать под банку пива, да и фиг с ним)
starkingdom, ну, если пользователи прыгающей пагинации тоже будут с банкой пива, то и норм.
starkingdom, я сталкивался с вп. Хватит писать хрень, иди лучше js с css подучи
yarovikov, вы суть вопроса поняли? Если да, можете поделиться мыслями
starkingdom, не понял, при чем тут вп. Вижу ток проблему, что не умеете верстать и не знаете js
yarovikov, так поделитесь, как данный блок сверстать, если я использую swiper js, который внутри слайда не работает пагинация, а картинка у меня задаётся, абсолютом, как мне расположить пагинацию как показана на картинке, если она по идее должна располагаться +- в слайде, а если пользователь наберёт текста больше, то пагинация закроет собой текст. Вы помогите, место того чтобы переводить данный вопрос в демагогию, сюда люди приходят, чтобы им помогли, а не чтобы их посылали, и указывали на какой-то сюр
starkingdom, для начала разместите ваш код на codepen
starkingdom, еще раз скажу, нужен код, либо на codepen, либо на реальном сайте. Без кода вопрос слишком АБСТРАКТНЫЙ. Как написали выше, пагинацию прибиваю книзу блока, чтобы не прыгала. Но не видя, как сейчас сделана верстка, не подсказать как правильно
Ankhena,
у вас не первый дизайнер, который плохо себе представляет, как неудобно, когда точки прыгают
последнее время еще ловлю приколы с жирным шрифтом при наведении в каких-нибудь менюшках, так что либо текст в пункте переносится либо пункт двигает соседей)
imko, ну, этой задачке 100 лет уже и решение тоже давно есть.
Ответы:
Ctrl+x пагинацию и Ctrl+v в необходимый слайд слайдера swiper.js. Комбинации клавиш для windows.
Ага, а потом во второй и тд. Но пагинация при этом одна.
Ankhena, какой вопрос - такой ответ )) Как поместить - взять и поместить. Как это будет работать - другой вопрос.
Нужно решить такую задачу?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для того чтобы поместить пагинацию внутрь слайда в библиотеке Swiper JS, вам потребуется немного настроить ваш слайдер. Ниже приведен пример кода на JavaScript, который покажет вам, как это можно сделать:
var mySwiper = new Swiper('.swiper-container', {
// Настройки слайдера
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
mySwiper.on('slideChange', function () {
var activeIndex = mySwiper.realIndex;
var paginationBullets = document.querySelectorAll('.swiper-pagination-bullet');
paginationBullets.forEach(function (bullet, index) {
if (index === activeIndex) {
bullet.classList.add('swiper-pagination-bullet-active');
} else {
bullet.classList.remove('swiper-pagination-bullet-active');
}
});
});
В этом коде мы создаем новый экземпляр Swiper и устанавливаем опцию pagination. В функции renderBullet мы возвращаем элемент пагинации с номером текущего слайда. Затем мы добавляем слушатель события slideChange, который отслеживает изменение слайда и обновляет активный элемент пагинации в соответствии с текущим слайдом.
Теперь ваша пагинация будет отображаться внутри слайда и будет автоматически обновляться при смене слайда в Swiper JS. Не забудьте также подключить библиотеку Swiper JS к вашему проекту перед использованием этого кода.
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Для того чтобы поместить пагинацию внутрь слайда в библиотеке Swiper JS, вам потребуется немного настроить ваш слайдер. Ниже приведен пример кода на JavaScript, который покажет вам, как это можно сделать:
var mySwiper = new Swiper('.swiper-container', { // Настройки слайдера pagination: { el: '.swiper-pagination', clickable: true, renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; }, }, }); mySwiper.on('slideChange', function () { var activeIndex = mySwiper.realIndex; var paginationBullets = document.querySelectorAll('.swiper-pagination-bullet'); paginationBullets.forEach(function (bullet, index) { if (index === activeIndex) { bullet.classList.add('swiper-pagination-bullet-active'); } else { bullet.classList.remove('swiper-pagination-bullet-active'); } }); });
В этом коде мы создаем новый экземпляр Swiper и устанавливаем опцию pagination. В функции renderBullet мы возвращаем элемент пагинации с номером текущего слайда. Затем мы добавляем слушатель события slideChange, который отслеживает изменение слайда и обновляет активный элемент пагинации в соответствии с текущим слайдом.
Теперь ваша пагинация будет отображаться внутри слайда и будет автоматически обновляться при смене слайда в Swiper JS. Не забудьте также подключить библиотеку Swiper JS к вашему проекту перед использованием этого кода.