• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
css слайдер

Адаптивный слайдер на CSS с креативным эффектом

Слайдер без использования JavaScript с крутым эффектом перелистывания слайдов. Отлично адаптируется под любые устройства. Исходники в наличии.

Особенность: слайдер на CSS

Слайдер на чистом CSS — это готовый слайдер с автоматическим переключением слайдов без помощи JS-скриптов. Как правило, такой вид слайдеров ценится начинающими разработчиками или в том случае, когда нет возможности\необходимость подключать библиотеки.

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

Как использовать этот пример у себя на сайте

По ссылке выше, Вы можете скачать архив, в котором будет располагаться файл slider-css.html. Теоретически, все, что Вам необходимо для запуска слайдера на CSS на Вашем сайте, находится в этом файле. Вот Ваш алгоритм действий:

1. Копируем все стили блока слайдера, они находятся в теге

<style class="cp-pen-styles">
...
</style>

Обратите внимание, что контейнер .untitled имеет свойства position: absolute и возможно, Вам придется немного адаптировать его под себя.

2. Все слайды обернуты в

<div class="untitled">
	<div class="untitled__slides">
             ...
        </div>
</div>

3. В самом HTML-коде слайда разобраться несложно

<div class="untitled__slide">
    <div class="untitled__slideBg"></div>
    <div class="untitled__slideContent">
        <span>London</span>
        <span>Scout</span>
        <a class="button" href="https://unsplash.com/@scoutthecity" target="/black">Unsplash Profile</a>
    </div>
</div>

Текст, кнопка, ссылка.

4. Картинка для слайда задается в его бекграунде

.untitled__slide:nth-child(1) .untitled__slideBg {
  background-image: url(https://unsplash.it/g/1500/2200?image=838);
}

Если Вы понимаете принцип работы абсолютного позиционирования, то для настройки слайдера под себя у Вас уйдет не более 3 минут. Удачи!

13003 просмотров