Слайдер с не обыденными эффектами?

Ссылка скопирована
1 ответ

Можете порекомендовать какой-нибудь адаптивный слайдер на js с интересными переходами, по веселее чем с стандартный "slide" и "fade"? Хочется на главную че-то веселенькое... Нашел интересный вариант, но за 50$...

Дополнительно:

Если интересный вариант уже есть перед глазами, его всегда можно повторить бесплатно=)

  • Сергей delphinpro, https://shaders-slider.uiinitiative.com да ну честно говоря я такое не повторю...
    Слайдер
  • hesrun, ну да. Такое с наскока не скопируешь. А если затраченное время посчитать, то может дешевле купить будет.
    Но с другой стороны, если хорошо ориентируешься в WebGL, то не составит труда расковырять и отдебажить основной скрипт. Опять же шейдеры можно оттуда взять в готовом виде.
  • Сергей delphinpro, интересно какой процент веб-разработчиков сейчас разбирается в webGL
  • Kentavr16, тема интересная. Но уж очень узкоспециализированная. Я вижу применение только в играх и в вау-эффектах, как этом слайдере.
  • Сергей delphinpro, Да это понятно. Эдакое пересечение 3-д моделирования и веба. Много времени на изучение, особенно для грамотного написания тех же шейдеров. А вы упомянули копирование шейдеров - это речь о стороннем софте?
  • Kentavr16, да там в исходниках вся обработка без обфускации.
  • тут есть прикольные эффекты https://swiperjs.com/swiper-api#cube-effect
    и в использовании не сложно
  • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Андрей PHP Ответ

    Для создания слайдера с необычными эффектами можно воспользоваться различными библиотеками и плагинами для JavaScript, такими как Swiper, Slick, Glide и другими. Эти инструменты позволяют легко создавать красивые и интерактивные слайдеры с различными эффектами перехода между слайдами.

    Прежде всего, необходимо подключить выбранную библиотеку к своему проекту. Например, для использования Swiper, вы можете добавить ссылку на CDN в разделе `` вашего HTML документа:

    ```html

    ```

    Затем создайте HTML разметку для слайдера, например:

    ```html

    Slide 1
    Slide 2
    Slide 3

    ```

    Инициализируйте Swiper на вашем слайдере:

    ```javascript
    var mySwiper = new Swiper('.swiper-container', {
    // Настройки слайдера
    effect: 'cube', // Необычный эффект
    grabCursor: true,
    cubeEffect: {
    slideShadows: true,
    shadow: true,
    shadowOffset: 20,
    shadowScale: 0.94
    },
    loop: true,
    autoplay: {
    delay: 5000,
    disableOnInteraction: false
    },
    pagination: {
    el: '.swiper-pagination',
    clickable: true
    }
    });
    ```

    Теперь у вас есть слайдер с эффектом "куб", который будет автоматически воспроизводить слайды с интервалом в 5 секунд. Вы можете настроить другие параметры слайдера, такие как скорость переключения, пагинацию, навигацию и многое другое в соответствии с вашими потребностями.

    Помните, что выбор эффекта и настроек зависит от дизайна вашего сайта и требований к слайдеру. Используйте документацию выбранной библиотеки для более подробной информации о возможностях и настройках.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно