Решение выполнено на jQuery, и может работать на всех экранах и с любым количеством фотографий

За основу данной темы взята идея с codepen

Подключать кучу библиотек для тусования такой колоды уж точно не стоит, но jQuery я оставил, так как для меня она удобнее чистого JS.

Пример:

HTML:

CSS:

При изменении кол-ва фотографий, нужно будет задать их поворот, добавив класс(ы)

JS:

Если нужно менять фотографии не по клику, а автоматически, то используем JS:

Время смены фото задается в миллисекундах в функции setInterval

Результат будет таким:

Смотрите также:

Вариант оформления блока с шестиугольными фотографиями разного размера

Медиа-плейер Plyr для воспроизведения HTML5 аудио и видео, YouTube и Vimeo

Плагин jQuery splits-slider Plugin для создания горизонтального аккордеона фотографий

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Тимур:

    Доброго дня, Александр!
    Подскажите пожалуйста, а как сделать так чтобы карточки проигрывались автоматически, пытаюсь сделать изменения в скрипте, но у меня получается что картинка первой карты всегда одинаковая.
    Спасибо заранее!

    Ответить
    • Alexander:

      Добавил в тему такой вариант.

      Ответить
      • Тимур:

        Все отлично работает! Александр, огромное Вам спасибо за помощь и обратную связь, вы очень хороший человек, а ваш сайт просто очень реально полезен!

        Ответить
  • Юлия:

    Александр, сердечное спасибо вам за эти находки!! Применила у себя. Адаптирую под Геткурс с его ограничениями и получаются потрясающие эффекты.

    Ответить
  • serega:

    админ, спасибо за сайт. Давай больше серьезных галерей .
    Поправка:
    При изменении кол-ва фотографий, нужно будет задать их поворот, добавив класс(ы)

    .cart:nth-child(номер_фото) {
    transform: rotate(ГРАДУС deg);

    Ответить
  • Андрей:

    Помогите пожалуйста можно как то сделать что бы появлялась случайная картинка из списка?

    Ответить
    • Alexander:

      Можно, обращайтесь по контактам справа.
      Тем более если вы ищите рандом с картами, есть и другие решения.

      Ответить
  • Олег:

    Добрый день! Очень понравился данное решение и захотелось у себя его реализовать. Но не получилось html+css (все разместить получилось) а вот JS - не хочет работать. Размещаю в sibgle.php - подскажите что может быть не так. Спасибо.

    Ответить
    • Alexander:

      single.php - это я так понимаю в WP?
      Если там подключать, то там должен быть путь к JS и подключаться ниже вывода статьи.

      Ответить