Вопросы с меткой [слайдер]

Для всех вопросов, связанных со слайдером как элементом интерфейса программы. В слайдере могут быть картинки (слайдер картинок) или ссылки на новости (новостные слайдеры).

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
9 показов

Не работает slick слайдер после того, как отображаю слайды с помощью JS с подгрузкой json данных?

const productsContainer = document.querySelector('#store__body') getProducts() async function getProducts() { const response = await fetch('./js/products.json') const productsArray = await ...
Tony Stark's user avatar
0 голосов
1 ответ
26 показов

Слайдер на Javascript требует доработки

Есть рабочий слайдер на javascript, но стоит задача избиваться от локальной переменной counter. Вот описание решения: С помощью findIndex найдите позицию активного слайда из массива слайдов. Это ...
Hitman's user avatar
  • 5
0 голосов
1 ответ
35 показов

Как сделать фиксированное расстояние между слайдами в слайдере?

Всем привет. Помогите пожалуйста. У меня на сайте имеется слайдер из 8 слайдов с бесконечной прокруткой. По умолчанию на экране отображается 4 слайда, дальше с помощью кнопок справа можно переключать ...
Rahym Charyyev's user avatar
0 голосов
0 ответов
17 показов

Как в слайдере Swiper сделать автоматически заполняющийся прогрессбар

Вот тут пытаюсь сделать, но пока все одновременно заполняются, а как сделать по очереди для каждого слайда? или может вообще надо по другому https://codepen.io/dima2323/pen/WNabNKx const ...
Андрей's user avatar
0 голосов
0 ответов
6 показов

Не работает адаптив swiper-слайдера в теге picture

Не работает адаптив swiper-слайдера в теге picture. При изменении ширины экрана изображение с десктопной версии не исчезает, а показывается позади изображения для текущего разрешения. HTML <div ...
Mikhail's user avatar
0 голосов
0 ответов
22 показа

Переключение слайдера

Выполняю задание слайдера на Скилфэктори (вдруг кто сталкивался). Задание заключается в том, чтобы при переключении слайдера (фото 1, 2, 3) выполнялось и переключение навигации вверху (соответствует № ...
Jul's user avatar
  • 1
0 голосов
0 ответов
20 показов

Перетаскивание картинки внутри окна при помощи JS

Господа, мое почтение. Пишу кастомную галерею-слайдер для сайта. При клике на картинку из коллекции (в разрешении 4К) открывается изображение подогнанное под размера экрана с CSS max-width: 99%; max-...
YummyCocktail's user avatar
2 голоса
0 ответов
21 показ

Слайдер с изображением в 100vh и областью видимости в 400px

Кто подскажет как реализовать такой эффект. Есть слайдер. он где то в середине страницы условно. Необходимо чтобы изображение было растянуто на 100vh, но область видимости была допустим 400px. Поясню ...
Denis's user avatar
  • 33
0 голосов
0 ответов
10 показов

Подскажите. Ошибся при добавлении второго слайд-шоу

Пробую сделать сайт с двумя слайд-шоу с управлением стрелками. Но не могу настроить стрелки на втором слайд-шоу. Где-то ошибся. Помогите найти. С одним все нормально. <div class="container5&...
Валерий Ч.'s user avatar
0 голосов
0 ответов
49 показов

Пропадают кнопки слайдера

В процессе создания слайдера возникло непредвиденное: стали пропадать кнопки. Я генерировала Нное число кружочков снизу слайда в зависимости от общего количества существующих слайдов. При сохранении ...
Дарина Емельянова's user avatar
0 голосов
0 ответов
23 показа

Необходимо, что бы слайдер работал в табах, не получается сделать

Есть несколько слайдеров, которые находятся в табах (смотреть кейсы в исходниках), кнопки переключения почему-то работают только на первом из них, необходимо что бы кнопки работали именно в активном ...
Кирилл Овечкин's user avatar
0 голосов
0 ответов
35 показов

Автоматическое изменение второго слайдера, при изменении первого слайдера | HTML+JS

Имеется задача: у меня есть 3 слайдера, когда я начинаю изменять один слайдер, второй и третий слайдер обратно пропорционально автоматически начинают изменяться. Аналогично и с другими слайдерами. Т.е....
Mike's user avatar
  • 13
0 голосов
0 ответов
84 показа

Слайдер как компонент или инфоблок для вставки на любую страницу мышкой (Битрикс)

Я хочу сделать слайдер/карусель как компонент или инфоблок для вставки на любую страницу. Чтобы не прописывать каждый раз код. А просто в визуальном редакторе на любой странице вставлять блок ...
superqwerty's user avatar
0 голосов
0 ответов
26 показов

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

Я хочу связать балуны карты с карточками слева. тоесть если я кликаю на определённый балун то слева свайпер скроллится до определённой карточки. Код свайпера const storeSlider = new Swiper('.store-...
Роман's user avatar
0 голосов
1 ответ
148 показов

Swiper проблема со слайдами

new Swiper('.companies__slider', { pagination: { el: '.swiper-pagination', clickable: true, }, slidesPerView: 4, spaceBetween: 25, slidesPerGroup: 3, }); &...
Серёжа Сучалкин's user avatar
0 голосов
0 ответов
13 показов

Рандомное воспроизведение звука

Есть сайт на Wordpess, на котором установлен плагин "Revolution 6.5.25". В нём установлен слайдер с видео фрагментом со звуком. Проблема в том что звук на видео воспроизводится не всегда. ...
Fruit's user avatar
  • 32
0 голосов
2 ответа
892 показа

Почему не подключается Swiper slider?

Хочу подключить Swiper slider через CDN. Соответственно что бы сделать слайдер. Вот код HTML boody: <div class="wrapper"> <!-- слайдер --> <div class="...
user avatar
0 голосов
0 ответов
21 показ

Почему не пропадают блоки

В этом коде блоки, которые не входят в диапазон слайдера должны пропадать, но этого почему то не происходит boxs = $('.shop'), length = boxs.length; filterAll.text(length); // Checkbox $('...
TuMan's user avatar
  • 1
0 голосов
0 ответов
28 показов

Пагинация Swiper'а появляется только после перезагрузке в браузере Opera

Столкнулся с проблемой того, что пагинация(для мобилки) Swiper'а появляется только после перезагрузки страницы в Opera. Swiper.update() не даёт результата. Проверял в хроме - там этой проблемы нет....
Burr_DI's user avatar
  • 122
-1 голос
1 ответ
152 показа

Самая современная реализация слайдера [закрыт]

Необходимо реализовать слайдер вручную (без использования swiper и т. п.). Подскажите наиболее современные способы.
wfamilyweb's user avatar
0 голосов
1 ответ
488 показов

Как добавить сразу несколько слайдеров Swiper на сайте для табов?

У меня есть таб с разными категориями для портфолио, и в каждый из них нужно добавить свой слайдер с своими работами. Можно ли это сделать не дублируя сразу весь код JS(var swiper = new Swiper) для ...
Kaido's user avatar
  • 1
0 голосов
0 ответов
10 показов

Фотографии в плагине fotorama отображаются в уменьшенном формате

У меня странная проблема. Создал галерею с помощью плагина Fotorama и Разместил ее на сайте. Фотографии начали показываться в уменьшенном формате. Это может повторятся бесконечно, в разных браузерах, ...
Андрей Глазачев's user avatar
0 голосов
1 ответ
99 показов

Как сделать автоматический слайдер?

Как сделать так, чтобы слайдер автоматически переключал слайды? (Aka автонажатие) let offset = 0; const sliderLine = document.querySelector('.slider-line'); document.querySelector('.slider-next')....
K1la's user avatar
  • 21
1 голос
0 ответов
43 показа

При прокрутке слайдера под текущим слайдом появляется следующий/предыдущий слайд, нет плавной смены слайдов. Как исправить?

На страницу добавлен слайдер при помощи Bootstrap 4. При прокрутке слайдов вперед или назад, следующий или предыдущий слайд появляется внизу под текущим, движется, исчезает и встает в сам слайдер. ...
Little Monstrik's user avatar
0 голосов
2 ответа
858 показов

Swiper внутри flex элемента растягиваются слайды, mw0 не помогает

Есть флекс контейнер. Внутри два элемента. Внутри каждого слайдер swiper, один из которых является thumbs(превью) для другого. На планшетных разрешениях контейнер складывается в flex-direction: column-...
Mau0HeZzz's user avatar
0 голосов
1 ответ
597 показов

React Swiper: не работают стрелки влево-вправо

Я сделал для своего слайдера кастомные стрелки, которые по сути представляют собой buttons с img внутри. Задача - сделать так, чтобы при нажатии на стрелку совершилась прокрутка списка карточек вправо-...
Олег Верушкин's user avatar
2 голоса
0 ответов
43 показа

Значение dots в owl carousel

Скачал шаблон сайта с W3layouts templates Есть слайдер, сделанный с помощью owl carousel. Каким образом можно сделать dots для owl-carousel в виде прямоугольника (как на скриншоте)?
wfamilyweb's user avatar
1 голос
1 ответ
206 показов

Поле да/нет Advanced Custom Fields

Есть сайт на wordpress, использую плагин Advanced Custom Fields версия 5.8.1. С помощью этого плагина выводится слайдер на странице. Каждый слайд состоит из полей: заголовок, описание, ссылка, ...
Виктория's user avatar
0 голосов
1 ответ
758 показов

Как реализовать автоматическую зацикленную карусель на JS

let i = 1; for(let li of carousel.querySelectorAll('li')) { li.style.position = 'relative'; li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}&...
DiNorowwW's user avatar
-1 голос
1 ответ
118 показов

Автоматический слайдер как реализовать? [закрыт]

Ребят наткнулся на код, но нужна помощь в реализации. Хотелось бы чтобы изображения менялись не при скролле, а автоматически $(document).ready(function() { var curPage = 1; var numOfPages = $(...
Никита's user avatar
0 голосов
2 ответа
1k показов

Галерея с миниатюрами изображений на js

как сделать так чтобы при нажатии на маленькую картинку она открывалась вместо большой с помощью JS
Mike's user avatar
  • 1
0 голосов
1 ответ
31 показ

Функция отвечает только на второй/третий клик по слушателю

Пытаюсь реализовать бесконечный слайдер, который в дальнейшем будет с плавной перемоткой. В данный момент не получается, чтобы перемотка запускалась при первом клике, только со второго или третьего. ...
GenykS's user avatar
  • 75
1 голос
1 ответ
338 показов

Как сделать слайдер с помощью animation и keyframes? HTML и CSS

Слайдер из 8 картинок. Нужно, чтоб автоматически каждая картинка 3 секунды стояла на месте и листалась в течение 2 секунд. И так 8 раз. Здесь нужно правильно прописать код @keyframes slider, но не ...
Muriam's user avatar
  • 371
0 голосов
1 ответ
428 показов

Настройка анимации (animateOut: animateIn:) при нажатии кнопок Owl Carousel 2

Всем хай:) Сегодня решил попробовать Owl Carousel. Он мне приглянулся из-за того, что при перелистывании слайдеров, можно подключать свою анимацию. Но возникли проблемы динамического изменения ...
Fullstack developer's user avatar
0 голосов
1 ответ
45 показов

проблемы со слайд шоу

Такая проблема: пытаюсь сделать слайд шоу без jQuery и т.п., но скрипт почему то не работает. он с начала не правильно подсвечивал точки (соответствующие номеру слайда), а потом перестал видеть на ...
Joker's user avatar
  • 93
0 голосов
1 ответ
3k показов

Как сделать увеличение активного слайда Swiper Slider?

Как сделать, чтобы активный слайд был увеличен где-то на 20% по отношению к неактивным? const swiper = new Swiper('.swiper-container', { loop: true, effect: 'coverflow', grabCursor: ...
Alex's user avatar
  • 24
0 голосов
1 ответ
1k показов

Как в Swiper пролистывать слайды после завершения анимации?

Когда ты пролистываешь несколько раз идёт быстрый переход, а нужно чтобы можно было пролистывать только когда завершится анимация пролистывания. В слик слайдере такое видел Вот пример - https://...
Arrov192's user avatar
0 голосов
0 ответов
214 показов

Помогите с кнопкой "назад" в слайдере на js

Делаю слайдер с кнопками <назад вперед>. кнопка вперед работает, все хорошо. Не знаю как написать функцию для кнопки назад. Сильно не ругайтесь, новичок(если честно до джавы еще не добрался, ...
Maneken's user avatar
0 голосов
1 ответ
85 показов

слайдер с фиксированным текстом слева

Всем привет!) Прошу пожалуйста помочь новичку.. Нужно сделать следующее: То есть, что бы текст изменялся внутри своего блока при прокрутке картинок с годами Пытался сделать с owl и slick, не ...
Andrey's user avatar
  • 1
0 голосов
0 ответов
568 показов

Как сделать, чтобы стили swiper slider не перекрывали стили элемента?

Есть идея создать оболочку для слайдов, но может у кого-нибудь есть другие идеи? до инициализации swiper слайдера: <div class="swiper-slide" style="background-image: url('img.png');&...
arrov199gmailcom's user avatar
3 голоса
2 ответа
2k показов

Как задать отступы у слайдов в Swiper-slider?

Без отступов всё хорошо, а с ними видно вместо двух слайдов три
Arrov19's user avatar
  • 51
1 голос
1 ответ
364 показа

Как сделать галерею картинок управляемую кнопками?

не смог нагуглить ответ, много вариантов перепробовал поэтому пишу вопрос. Мне нужно сделать галерею с выборов, вот схема, как это должно выглядеть: Т.е при нажатии на кнопку меняется текст и ...
Tek Inferno's user avatar
0 голосов
0 ответов
90 показов

Slick настройка слайдера

$(document).ready(function() { $('.carousel__inner').slick({ centerMode: true, centerPadding: '70px', slidesToShow: 5, slidesToScroll: 3, initialSlide: 1, prevArrow: '<...
Юрий's user avatar
  • 101
0 голосов
0 ответов
40 показов

После переключения слайдов ошибка: Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLDivElement

После переключения трёх слайдов появляется ошибка Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLDivElement HTML <div class="slider"> <div ...
Kateryna_N's user avatar
0 голосов
1 ответ
615 показов

Свайпер обрезает часть блока, которая должна остаться

У swiper-container по умолчанию стоит overflow: hidden;. Из-за этого он обрезает часть слайдов по оси-Y. Если я поменяю на overflow: visible;, то по оси-Y будет всё ок, а вот по оси-X будет видна ...
roderann's user avatar
1 голос
0 ответов
134 показа

Как сделать несколько слайдер-каруселей на одной странице?

Помогите разобраться, на странице имеется слайдер-карусель, мне он нравится, простой, ничего лишнего, хотел сделать еще один такой же слайдер с другим контентом, но на втором слайдере не работают ...
Александр's user avatar
2 голоса
2 ответа
576 показов

Помогите написать таймер для перемещения слайдера на JS

Только начал познавать JS, решил попрактиковаться и сделать слайдер. Слайдер из себя представляет ленту с картинками, которая перемещается при нажатии на кнопки prev и next, а также на кнопки-...
BattLzZ's user avatar
  • 35
1 голос
1 ответ
63 показа

Получение концевых значений слайдера

Есть код слайдера <div class="PriceSlider"> <div class="PriceSlider__header">Цена, ₽</div> <div class="PriceSlider__inputs"><input name="input-min" class="...
user avatar
-1 голос
1 ответ
200 показов

Как интегрировать slick slider или swiper?

Как slick slider или swiper вместо текущего в вёрстке. Файл с текущим и описание прилагаю, картинки выгружаются из базы данных <?php $gallery = explode(", ", $images); ?> &...
Volkroft's user avatar
1 голос
1 ответ
495 показов

слайдер на чистом js. Плавное переключение картинок

как сделать плавное переключение картинок слайдера? Пытался через css transition, но ничего не получилось. Прошу вашей помощи всезнающие, ибо без вас серьезно не смогу понять. JS: var image = ['...
HLEB HLEB's user avatar
  • 349