Вопросы с меткой [слайдер]
Для всех вопросов, связанных со слайдером как элементом интерфейса программы. В слайдере могут быть картинки (слайдер картинок) или ссылки на новости (новостные слайдеры).
136
вопросов
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 ...
0
голосов
1
ответ
26
показов
Слайдер на Javascript требует доработки
Есть рабочий слайдер на javascript, но стоит задача избиваться от локальной переменной counter. Вот описание решения: С помощью findIndex найдите позицию активного слайда из массива слайдов. Это ...
0
голосов
1
ответ
35
показов
Как сделать фиксированное расстояние между слайдами в слайдере?
Всем привет. Помогите пожалуйста. У меня на сайте имеется слайдер из 8 слайдов с бесконечной прокруткой. По умолчанию на экране отображается 4 слайда, дальше с помощью кнопок справа можно переключать ...
0
голосов
0
ответов
17
показов
Как в слайдере Swiper сделать автоматически заполняющийся прогрессбар
Вот тут пытаюсь сделать, но пока все одновременно заполняются, а как сделать по очереди для каждого слайда? или может вообще надо по другому
https://codepen.io/dima2323/pen/WNabNKx
const ...
0
голосов
0
ответов
6
показов
Не работает адаптив swiper-слайдера в теге picture
Не работает адаптив swiper-слайдера в теге picture. При изменении ширины экрана изображение с десктопной версии не исчезает, а показывается позади изображения для текущего разрешения.
HTML
<div ...
0
голосов
0
ответов
22
показа
Переключение слайдера
Выполняю задание слайдера на Скилфэктори (вдруг кто сталкивался).
Задание заключается в том, чтобы при переключении слайдера (фото 1, 2, 3) выполнялось и переключение навигации вверху (соответствует № ...
0
голосов
0
ответов
20
показов
Перетаскивание картинки внутри окна при помощи JS
Господа, мое почтение. Пишу кастомную галерею-слайдер для сайта. При клике на картинку из коллекции (в разрешении 4К) открывается изображение подогнанное под размера экрана с CSS
max-width: 99%;
max-...
2
голоса
0
ответов
21
показ
Слайдер с изображением в 100vh и областью видимости в 400px
Кто подскажет как реализовать такой эффект.
Есть слайдер. он где то в середине страницы условно. Необходимо чтобы изображение было растянуто на 100vh, но область видимости была допустим 400px.
Поясню ...
0
голосов
0
ответов
10
показов
Подскажите. Ошибся при добавлении второго слайд-шоу
Пробую сделать сайт с двумя слайд-шоу с управлением стрелками. Но не могу настроить стрелки на втором слайд-шоу. Где-то ошибся. Помогите найти. С одним все нормально.
<div class="container5&...
0
голосов
0
ответов
49
показов
Пропадают кнопки слайдера
В процессе создания слайдера возникло непредвиденное: стали пропадать кнопки.
Я генерировала Нное число кружочков снизу слайда в зависимости от общего количества существующих слайдов. При сохранении ...
0
голосов
0
ответов
23
показа
Необходимо, что бы слайдер работал в табах, не получается сделать
Есть несколько слайдеров, которые находятся в табах (смотреть кейсы в исходниках), кнопки переключения почему-то работают только на первом из них, необходимо что бы кнопки работали именно в активном ...
0
голосов
0
ответов
35
показов
Автоматическое изменение второго слайдера, при изменении первого слайдера | HTML+JS
Имеется задача: у меня есть 3 слайдера, когда я начинаю изменять один слайдер, второй и третий слайдер обратно пропорционально автоматически начинают изменяться. Аналогично и с другими слайдерами. Т.е....
0
голосов
0
ответов
84
показа
Слайдер как компонент или инфоблок для вставки на любую страницу мышкой (Битрикс)
Я хочу сделать слайдер/карусель как компонент или инфоблок для вставки на любую страницу. Чтобы не прописывать каждый раз код. А просто в визуальном редакторе на любой странице вставлять блок ...
0
голосов
0
ответов
26
показов
Как можно связать балуны яндекс карт с элементами слайдера
Я хочу связать балуны карты с карточками слева. тоесть если я кликаю на определённый балун то слева свайпер скроллится до определённой карточки.
Код свайпера
const storeSlider = new Swiper('.store-...
0
голосов
1
ответ
148
показов
Swiper проблема со слайдами
new Swiper('.companies__slider', {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
slidesPerView: 4,
spaceBetween: 25,
slidesPerGroup: 3,
});
&...
0
голосов
0
ответов
13
показов
Рандомное воспроизведение звука
Есть сайт на Wordpess, на котором установлен плагин "Revolution 6.5.25".
В нём установлен слайдер с видео фрагментом со звуком. Проблема в том что звук на видео воспроизводится не всегда. ...
0
голосов
2
ответа
892
показа
Почему не подключается Swiper slider?
Хочу подключить Swiper slider через CDN. Соответственно что бы сделать слайдер.
Вот код HTML boody:
<div class="wrapper">
<!-- слайдер -->
<div class="...
0
голосов
0
ответов
21
показ
Почему не пропадают блоки
В этом коде блоки, которые не входят в диапазон слайдера должны пропадать, но этого почему то не происходит
boxs = $('.shop'),
length = boxs.length;
filterAll.text(length);
// Checkbox
$('...
0
голосов
0
ответов
28
показов
Пагинация Swiper'а появляется только после перезагрузке в браузере Opera
Столкнулся с проблемой того, что пагинация(для мобилки) Swiper'а появляется только после перезагрузки страницы в Opera. Swiper.update() не даёт результата. Проверял в хроме - там этой проблемы нет....
-1
голос
1
ответ
152
показа
Самая современная реализация слайдера [закрыт]
Необходимо реализовать слайдер вручную (без использования swiper и т. п.). Подскажите наиболее современные способы.
0
голосов
1
ответ
488
показов
Как добавить сразу несколько слайдеров Swiper на сайте для табов?
У меня есть таб с разными категориями для портфолио, и в каждый из них нужно добавить свой слайдер с своими работами.
Можно ли это сделать не дублируя сразу весь код JS(var swiper = new Swiper) для ...
0
голосов
0
ответов
10
показов
Фотографии в плагине fotorama отображаются в уменьшенном формате
У меня странная проблема.
Создал галерею с помощью плагина Fotorama и Разместил ее на сайте.
Фотографии начали показываться в уменьшенном формате. Это может повторятся бесконечно, в разных браузерах, ...
0
голосов
1
ответ
99
показов
Как сделать автоматический слайдер?
Как сделать так, чтобы слайдер автоматически переключал слайды? (Aka автонажатие)
let offset = 0;
const sliderLine = document.querySelector('.slider-line');
document.querySelector('.slider-next')....
1
голос
0
ответов
43
показа
При прокрутке слайдера под текущим слайдом появляется следующий/предыдущий слайд, нет плавной смены слайдов. Как исправить?
На страницу добавлен слайдер при помощи Bootstrap 4. При прокрутке слайдов вперед или назад, следующий или предыдущий слайд появляется внизу под текущим, движется, исчезает и встает в сам слайдер. ...
0
голосов
2
ответа
858
показов
Swiper внутри flex элемента растягиваются слайды, mw0 не помогает
Есть флекс контейнер. Внутри два элемента. Внутри каждого слайдер swiper, один из которых является thumbs(превью) для другого. На планшетных разрешениях контейнер складывается в flex-direction: column-...
0
голосов
1
ответ
597
показов
React Swiper: не работают стрелки влево-вправо
Я сделал для своего слайдера кастомные стрелки, которые по сути представляют собой buttons с img внутри. Задача - сделать так, чтобы при нажатии на стрелку совершилась прокрутка списка карточек вправо-...
2
голоса
0
ответов
43
показа
Значение dots в owl carousel
Скачал шаблон сайта с W3layouts templates
Есть слайдер, сделанный с помощью owl carousel.
Каким образом можно сделать dots для owl-carousel в виде прямоугольника (как на скриншоте)?
1
голос
1
ответ
206
показов
Поле да/нет Advanced Custom Fields
Есть сайт на wordpress, использую плагин Advanced Custom Fields версия 5.8.1.
С помощью этого плагина выводится слайдер на странице. Каждый слайд состоит из полей: заголовок, описание, ссылка, ...
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}&...
-1
голос
1
ответ
118
показов
Автоматический слайдер как реализовать? [закрыт]
Ребят наткнулся на код, но нужна помощь в реализации. Хотелось бы чтобы изображения менялись не при скролле, а автоматически
$(document).ready(function() {
var curPage = 1;
var numOfPages = $(...
0
голосов
2
ответа
1k
показов
Галерея с миниатюрами изображений на js
как сделать так чтобы при нажатии на маленькую картинку она открывалась вместо большой с помощью JS
0
голосов
1
ответ
31
показ
Функция отвечает только на второй/третий клик по слушателю
Пытаюсь реализовать бесконечный слайдер, который в дальнейшем будет с плавной перемоткой. В данный момент не получается, чтобы перемотка запускалась при первом клике, только со второго или третьего.
...
1
голос
1
ответ
338
показов
Как сделать слайдер с помощью animation и keyframes? HTML и CSS
Слайдер из 8 картинок. Нужно, чтоб автоматически каждая картинка 3 секунды стояла на месте и листалась в течение 2 секунд. И так 8 раз. Здесь нужно правильно прописать код
@keyframes slider, но не ...
0
голосов
1
ответ
428
показов
Настройка анимации (animateOut: animateIn:) при нажатии кнопок Owl Carousel 2
Всем хай:) Сегодня решил попробовать Owl Carousel. Он мне приглянулся из-за того, что при перелистывании слайдеров, можно подключать свою анимацию. Но возникли проблемы динамического изменения ...
0
голосов
1
ответ
45
показов
проблемы со слайд шоу
Такая проблема: пытаюсь сделать слайд шоу без jQuery и т.п., но скрипт почему то не работает. он с начала не правильно подсвечивал точки (соответствующие номеру слайда), а потом перестал видеть на ...
0
голосов
1
ответ
3k
показов
Как сделать увеличение активного слайда Swiper Slider?
Как сделать, чтобы активный слайд был увеличен где-то на 20% по отношению к неактивным?
const swiper = new Swiper('.swiper-container', {
loop: true,
effect: 'coverflow',
grabCursor: ...
0
голосов
1
ответ
1k
показов
Как в Swiper пролистывать слайды после завершения анимации?
Когда ты пролистываешь несколько раз идёт быстрый переход, а нужно чтобы можно было пролистывать только когда завершится анимация пролистывания. В слик слайдере такое видел
Вот пример - https://...
0
голосов
0
ответов
214
показов
Помогите с кнопкой "назад" в слайдере на js
Делаю слайдер с кнопками <назад вперед>. кнопка вперед работает, все хорошо. Не знаю как написать функцию для кнопки назад. Сильно не ругайтесь, новичок(если честно до джавы еще не добрался, ...
0
голосов
1
ответ
85
показов
слайдер с фиксированным текстом слева
Всем привет!) Прошу пожалуйста помочь новичку..
Нужно сделать следующее:
То есть, что бы текст изменялся внутри своего блока при прокрутке картинок с годами
Пытался сделать с owl и slick, не ...
0
голосов
0
ответов
568
показов
Как сделать, чтобы стили swiper slider не перекрывали стили элемента?
Есть идея создать оболочку для слайдов, но может у кого-нибудь есть другие идеи?
до инициализации swiper слайдера:
<div class="swiper-slide" style="background-image: url('img.png');&...
3
голоса
2
ответа
2k
показов
Как задать отступы у слайдов в Swiper-slider?
Без отступов всё хорошо, а с ними видно вместо двух слайдов три
1
голос
1
ответ
364
показа
Как сделать галерею картинок управляемую кнопками?
не смог нагуглить ответ, много вариантов перепробовал поэтому пишу вопрос.
Мне нужно сделать галерею с выборов, вот схема, как это должно выглядеть:
Т.е при нажатии на кнопку меняется текст и ...
0
голосов
0
ответов
90
показов
Slick настройка слайдера
$(document).ready(function() {
$('.carousel__inner').slick({
centerMode: true,
centerPadding: '70px',
slidesToShow: 5,
slidesToScroll: 3,
initialSlide: 1,
prevArrow: '<...
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 ...
0
голосов
1
ответ
615
показов
Свайпер обрезает часть блока, которая должна остаться
У swiper-container по умолчанию стоит overflow: hidden;. Из-за этого он обрезает часть слайдов по оси-Y. Если я поменяю на overflow: visible;, то по оси-Y будет всё ок, а вот по оси-X будет видна ...
1
голос
0
ответов
134
показа
Как сделать несколько слайдер-каруселей на одной странице?
Помогите разобраться, на странице имеется слайдер-карусель, мне он нравится, простой, ничего лишнего, хотел сделать еще один такой же слайдер с другим контентом, но на втором слайдере не работают ...
2
голоса
2
ответа
576
показов
Помогите написать таймер для перемещения слайдера на JS
Только начал познавать JS, решил попрактиковаться и сделать слайдер.
Слайдер из себя представляет ленту с картинками, которая перемещается при нажатии на кнопки prev и next, а также на кнопки-...
1
голос
1
ответ
63
показа
Получение концевых значений слайдера
Есть код слайдера
<div class="PriceSlider">
<div class="PriceSlider__header">Цена, ₽</div>
<div class="PriceSlider__inputs"><input name="input-min" class="...
-1
голос
1
ответ
200
показов
Как интегрировать slick slider или swiper?
Как slick slider или swiper вместо текущего в вёрстке. Файл с текущим и описание прилагаю, картинки выгружаются из базы данных
<?php $gallery = explode(", ", $images); ?>
&...
1
голос
1
ответ
495
показов
слайдер на чистом js. Плавное переключение картинок
как сделать плавное переключение картинок слайдера? Пытался через css transition, но ничего не получилось. Прошу вашей помощи всезнающие, ибо без вас серьезно не смогу понять.
JS:
var image = ['...