Как сделать слайдер с видео на Tilda без плагинов
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2022
- Всем привет!
В этом уроке я хотел бы поделиться с вами слайдером/каруселью, который я написал для одного из своего проектов.
Слайдер работает в Zero Block на Tilda и прекрасно адаптируется для всех устройств.
Вы можете использовать этот код в своих проектах без ограничений, однако большая просьба: не убирайте комментарии с ссылками на автора.
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmysite
Ссылка на код для базового слайдера (без видео):
codepen.io/Max-Mitrofanov/pen...
Ссылка на код для слайдера с видео:
codepen.io/Max-Mitrofanov/pen...
Вааааау это просто сказка!!! Огромная БЛАГОДАРНОСТЬ!
Все супер, было бы не круто если бы добавили возможность добавлять в слайдер именно карточки с изо и текстом
Спасибо большое за урок! Получилась красота🤗
Спасибо огромное!!!
Чуть с ума не сошел, пока искал что то подобное!!!
Выглядить крутейше! Пойду пробовать
Большой респект за такой классный слайдер. Добавляюсь в желающие получить код картинка+текст, такой вариант тоже очень нужен
Это не уро, а ЗОЛОТО!!! Сколько других я пересмотрела -всё не то, где-то что-то едет, не так отображается. Здесь - идеально!!! Невероятное и необъятное СПАСИБО 😊😊😊
Спасибо Огромное!!!За объяснение, за код!я на сутки сроднилась в этим видео)
Спасибо огромное!!! Неделю искала это
Спасибо, ждем новых видео👍👍👍👍
Очень полезное видео, спасибо большое!!!)
Большое спасибо за такой классный слайдер. Добавляюсь в желающие получить код картинка+текст, такой вариант тоже очень нужен
Спасибо большое! как же это круто))
Воу) Спасибо большое)) очень полезное и подробное видео
Респект за такие видео! Очень круто что есть такая инфа
Очень круто объяснил 🔥 слайдер с фотками давай
Информативно) обложка топ 😉
С дебютом!
Спасибо огромное!!!))) Видео супер, без лишней воды и все по делу. Запишите пожалуйста видео, как сделать чтобы в ютуб слайдере можно было картинки вставлять. Что бы было чередование, одна карточка видео+текст, другая картинка+текст, следующая например просто картинка. Заранее спасибо)
Спасибо огромное))
Спасибо продолжай в том же духе👍
Жирный лайк! очень полезное видео! Спасибо!
Респект огромный за такой видос. И кстати в первом примере можно вместо фигур (карточек) использовать видео с ютуба. Спасибо еще раз и ОГРОМНЫЙ R E S P E C T
а как ты присваивал css ютуб видео?
Всё супер, только не хватает пролистывание курсором и пальцем на мобилках
единственный во всём утубе рассказал про тильду без воды. достаточно сложно, чтобы быть интересным, спасибо за урок.
но есть пара вопросов:
как сделать, чтобы плеер автоматически запускался при появлении слайда? можно ли привязать кнопку к функции "плей"? не могу понять, где редактировать движение слайдера и анимацию карточек. и было бы очень круто, если у нас появилось видео про видео плееры. где смотреть\как писать\как вставлять\и т.д.
спасибо еще раз.
а ещё, если запустить видео и пролистнуть слайд, видео продолжит воспроизводиться. так можно запустить 4 плеера разом и послушать квартет плееров. а тут, что посоветуете?)
Спасибо. Все получилось
сделай видео с кодами для ютуб, слайдер с картинками тоже интересен.
Здравствуйте !..☀ Очень интересно !.. 👍
А можно это сделать с фото, а лучше типа карусель с фото - очень актуально !..😇
Вы хорошо объясняете !.. Спасибо вам за ваш труд !..🙏
Всё круто лайк а у вас есть ролик как адаптировать под другие устройства
Спасибо больше за код и видео!!! Могли бы добавить пролистывание пальцем на мобильных устройствах?
Спасибо, очень полезное видео без воды! Всё получилось, отлично работает
Единственное, можно как-то на ПК сделать так, чтобы при первом видео не было пустого пространства слева, а сразу появилось 3 видео на экране?
Тоже интересно, как сделать так, чтобы старт был с 2 карточки, слева и справа и посередине большая по умолчанию.
Нашел решение, просил у chatGPT) код проверил, работает. Теперь слайдер стартует с 2 картинки, нет пустоты слева.
(function () {
const slides = document.querySelectorAll(`.slider`);
const buttonLeft = document.querySelector(`.slider__btn--left`);
const buttonRight = document.querySelector(`.slider__btn--right`);
const dots = document.querySelectorAll(`.dot`);
let curSlide = 1; // Изменено с 0 на 1, чтобы начать со второго слайда
const maxSlide = slides.length - 1;
const dotFill = (slide) => {
dots.forEach((el, i) => {
if (i === slide) {
el.classList.add("cur_dot");
} else if (el.classList.contains("cur_dot")) {
el.classList.remove("cur_dot");
}
});
};
const initCondition = () => {
goToSlide(curSlide); // Изменено с 0 на curSlide
dotFill(curSlide); // Изменено с 0 на curSlide
};
const goToSlide = (slideNum) => {
slides.forEach((s, i) => {
s.style.transform = `translateX(${(i - slideNum) * 150}%)`;
if (i === slideNum) s.classList.add("cur-slide");
else {
s.classList.remove("cur-slide");
}
});
};
const toNextSlide = () => {
curSlide === maxSlide ? (curSlide = 0) : curSlide++;
goToSlide(curSlide);
dotFill(curSlide);
};
const toPrevSlide = () => {
curSlide > 0 ? curSlide-- : (curSlide = maxSlide);
goToSlide(curSlide);
dotFill(curSlide);
};
buttonRight.addEventListener(`click`, toNextSlide);
buttonLeft.addEventListener(`click`, toPrevSlide);
document.addEventListener(`keydown`, (e) => {
e.key === `ArrowRight` && toNextSlide();
e.key === `ArrowLeft` && toPrevSlide();
});
dots.forEach((el, i) =>
el.addEventListener("click", () => {
dotFill(i);
goToSlide(i);
})
);
initCondition();
})();
Спасибо! Все круто! Можете подсказать, как применить стиль к тексту внутри карточки под видео. Заголовок на сл строке текстовый блок?
Зачем делать с Дропбоксом если им никто не пользуется?
М А К С И М ❤ Б Л А Г О Д А Р Ю !
Подписка
В общем пригодился вариант, стоит на резрешение до 980. Правда свайп не предусмотрен, только пагинация получается. На компе не запускаются ролики дольше 30сек. А на телефоне нормально.
Зато блок gl27+popUp на мобилках идет ужасно, с карточками во весь экран. т.ч. у меня два варианта эти .
Огромное спасибо за урок!!! Скажите пожалуйста, если мне нужен слайдер только с видео, без подписей, как убрать надпись "undefined"? Я убрала из кода блок, куда вставлять тексты .. и все сломалось 😂😂
Спасибо, но! Почему оговорка, что это только для видео с дропбокс в самом конце? Я уже сделала, а видео клиента на ютуб...
На мобильных устройствах снизу подрезается текст, если он объёмный, не могу понять как это исправить. Размер шейпа увеличивал, не помогло
Здравствуйте Максим!
Хотел узнать узнать по поводу Вашего видео о том как сделать анимацию появляющейся линии
сама линия у меня получилась и появляется при скролле, но изначально в svg она была прерывистой при анимации она стала сплошной
не подскажете как это можно исправить?
Добрый день, подскажите, если видео будет не горизонтальное, а вертикальное, оно встанет вертикально в карточку или будет растянуто по горизонтали?
го видео где можно использовать вместо видео обычные картинки с текстом)
дошла пошагово до 14 минуты и узнала, что скрипт работает только для дропбокса, а у меня видео с ютуба😬
Привет! Спасибо за видео, всё работает, если чётко следовать инструкции! Такой вопрос, пытался поменять путь для видео не из дропбокса, а на яндекс. Доступ открыт, но видео при этом не загружается. Можешь подсказать как правильно написать путь? Я так понимаю в коде не много менять нужно.
А, всё, разобрался😄
@@user-go9tg4vb4n Привет! Подскажи пожалуйста, что ты сделал, чтобы видео из яндекса грузились?
@@user-go9tg4vb4n да что ты сделал
Здравствуйте. как сделать чтобы когда проигрывается видео и перелистываешь на следующее то видео предыдущее останавливалось.
Все круто получилось. работает! Но есть вопрос
Подскажите, пожалуйста, почему иногда сбивается ритм переключения? например нахожусь на 3й картинке, жмем стрелку вправо (переключиться на 4ю) а меня кидает на первую
Хм, не замечал такого, поищу ошибку, в любом случае буду записывать видео с улучшенной версией кода
@@ohmysite455 спасибо!
Подскажите, как убрать красное свечение , тень ?
Как зациклить слайдер? Чтобы он листал по кругу?
поддерживаю, как так сделать?
Не отображаются видео и текст. Ошибок в консоле нет. В чем может быть проблема?😢
Спасибо работает, но. Как картинки то вставить? И стиль текста поменять..
Можно ли скрипт как то перенастроить под ютуб ????
Сделал все точности как на видео со всеми карточками все в порядке у меня их 9 но в 5 и 6 видео и шейп растянулись на весь блок.
Уже голову сломал как исправить проблему
спасибо за способ!
Все работало, а сегодня слетели видео....Не знаешь в чем косяк?
У меня почему-то только одно видео работает, если через dropbox делать. Остальные - просто черный экран. И при нажатии на "play" они не проигрываются, хотя продолжительность отображается. Короче, странно
подскажите пожалуйста, можно ли на одной странице два таких блока сделать со слейдером фото?? и если да, то как? копировать еще по одному блоку этих кодов?
Спасибо за идею для нового видео :)
@@ohmysite455 Вам спасибо огромное, что помогли мне)))
Добрый день
Задумка хорошая, но у меня видео встает не в какой то бокс в карточке, а оно на всю карточку и даже не влезает.
Можете подсказать в чем проблема? Нужно какое-то определенное разрешение в видео?
Текст тоже не видно...
Напишите мне в телеграм, разберемся @ohmysite
видео классное но я не пользуюсь дропбоксом как сменить его на гуугл дикс?
Привет! Я может руко..п, но на пустой странице собираю, все работает. Как только копирую блоки с каруселью и кодом (меняя при этом id блока, так как он меняется) и ставлю в то место сайта, которое мне нужно, ничего не работает. Если сразу собирать на сайте, где надо, то тоже не работает. Получается это все работает то только на отдельной созданной странице что ли? Поясните нубу пжст ))
Здравствуйте. Я начинающий специалист по сайтам. Поставила ваш код на сайт, но почему-то все видео у меня свалились в одну кучу и не листаются, они просто выстроились друг за другом. Нажимаю на кнопки вправо-влево, видно по подсветке, что реагирует, но не листает. Причем это только на десктопной версии, на мобильнике все норм. Можете пояснить, в чем может быть проблема.
Здравствуйте. Хочу с фото и́ текстом в карточках
Где взять код?
Мужик, у тебя в видео кода на 190 строчек, а по ссылке всего 40, как так?
Я все сделала, дошла до шага "добавить видео, текст" и ничего не отображается. Анимация при этом работает. Помогитееее, сижу целый день.
Здравствуйте, в мобилке адаптива нет(( на компе все раотает, спасибо, почему так может быть?
а вы зероблок адаптировали под мобилки?) все гуд работает
Делаю все точно так же, кнопки увеличиваются, но слайды не листаются
можете написать мне в телеграм? Найдем ошибку @ohmysite
У меня не работает 😩
а скрипт то где?
Код показывает ошибку в самой тильде в контенте. Копирую ваш код
video:516 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')
at video:516:8
at Array.forEach ()
at fillSlide (video:515:15)
at video:558:1
(anonymous) @ video:516
fillSlide @ video:515
(anonymous) @ video:558
DevTools failed to load source map: Could not load content for chrome-extension://dmkamcknogkgcdfhhbddcghachkejeap/browser-polyfill.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
карусель не крутится , ошибка
Здравствуйте. Хочу с фото и́ текстом в карточках