Как сделать плавную карусель логотипов?
Ребят, всем привет. Хочу сделать !!!плавную!!! зацикленную карусельку логотипов.
На главной странице сайта timeweb.ru есть карусель логотипов.
Вот я хочу прям точно такую же (чтобы работала точно также). Я пробовал сделать подобное через swiper.js но у меня не получилось, т.к. там страбатывает пауза на каждом слайде из-за чего отсуствует плавность.
Подскажите пожалуйста решение. Буду очень рад
Дополнительно:
А доки свайпера читал? Не просто же так нам пишешь?
snippet
- Дай бог тебе и твоим близким здоровья, мудрый человек. Жену красавицу, денег немерено и счастья астрономического !
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания плавной карусели логотипов на веб-странице можно использовать CSS и JavaScript. Вот пример, как это можно реализовать:
1. HTML:
```html
```
2. CSS:
```html
.carousel {
width: 100%;
overflow: hidden;
}
.logo {
float: left;
width: 33.33%; /* Делим на количество логотипов */
transition: transform 0.5s ease; /* Добавляем плавный переход */
}
.logo img {
max-width: 100%;
display: block;
margin: 0 auto;
}
```
3. JavaScript:
```html
let carousel = document.querySelector('.carousel');
let logos = document.querySelectorAll('.logo');
let currentIndex = 0;
function slideToNextLogo() {
currentIndex = (currentIndex + 1) % logos.length;
let offset = -currentIndex * 100;
carousel.style.transform = `translateX(${offset}%)`;
}
setInterval(slideToNextLogo, 3000); // Автоматическая смена логотипов каждые 3 секунды
```
Этот код создаст карусель из трех логотипов, которая будет автоматически меняться каждые 3 секунды. Вы можете настроить количество логотипов и время переключения в соответствии с вашими потребностями. Надеюсь, это поможет вам создать плавную карусель логотипов на вашем сайте!