Вернуться




Как сделать слайдер в HTML на своем сайте: краткая инструкция



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

Слайдер в том или ином исполнении присутствует во всех современных веб-сайтах, потому что такие блоки являются визуально привлекательными и могут акцентировать внимание пользователей на своем контенте.

 

Слайдер для сайта — это норма

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

Слайдер бывает очень разным. Например, самая простая его реализация — это обычный последовательный просмотр элементов самого слайдера. В более сложных реализациях могут добавляться:

  • ручное и автоматическое перелистывание;

  • возможность перейти по ссылке, нажав на сам слайдер;

  • наличие кнопок с призывом действия;

  • анимационные эффекты при смене слайдов;

  • и мн. др.

Раньше слайдер реализовывался по простому принципу:

  • за место, где вывести слайдер, отвечал HTML;

  • за то, как визуально выглядит слайдер, отвечал CSS;

  • за анимационные сценарии и дополнительные функции отвечал JavaScript.

Сейчас по такому принципу можно также разработать слайдер. Однако современные возможности CSS позволяют при разработке слайдера не использовать JavaScript. Многие современные разработчики как раз склоняются к реализации слайдера при помощи только HTML и CSS. У такого подхода есть одно явное преимущество — скорость работы такого слайдера выше за счет того, что вся обработка кода слайдера происходит в движке браузера и она никак не зависит от каких-либо дополнительных процессов.

 

Как реализовать слайдер для своего сайта

Слайдер можно добавить на сайт двумя путями:

  • воспользоваться готовым решением, если это позволяет сделать ваш сайт;

  • сделать слайдер на сайте самостоятельно, например, применяя HTML и CSS.

 

Готовое решение слайдера для сайта

Готовый слайдер для сайта — это идеальный вариант, когда ваш сайт работает на популярных CMS, например, Wordpress, Joomla и др. Многие подобные CMS имеют готовые решения для слайдера в виде специальных плагинов. Все, что нужно сделать, это:

  • установить соответствующий плагин из официального репозитория вашей CMS;

  • активировать плагин;

  • настроить слайдер в админке вашего сайта, добавив в него контент для вывода;

  • вывести слайдер в нужном месте при помощи шорткода, кода HTML или функции.

 

Как сделать слайдер на своем сайте HTML при помощи CSS

Бывает же такое, что сайт не использует CMS. В этом случае нужно будет самостоятельно разработать свой слайдер. Как правило, такая разработка слайдера должна быть осуществлена при помощи той же технологии, на которой разработан ваш сайт. Практически любой современный язык программирования или какой-либо фреймворк имеют в своем арсенале инструменты для разработки слайдера. Все инструменты и подходы, как можно реализовать слайдер для сайта, не перечислить. Но мы можем рассмотреть самую простую ситуацию, как сделать слайдер на своем сайте HTML при помощи CSS.

 

Делаем простой адаптивный слайдер на CSS

Для начала нам нужен будет HTML слайдера. Например, у нас есть:

<body>

<div class="adaptivSlayder">

  <input type="radio" name="kadoves" id="slaid1" checked>

  <input type="radio" name="kadoves" id="slaid2">

  <input type="radio" name="kadoves" id="slaid3">

   

  <div class="kadoves">

  <label for="slaid1"></label>

  <label for="slaid2"></label>

  <label for="slaid3"></label>

  </div>

   

  <div class="adaptivSlayderlasekun">

  <div class="abusteku-deagulus">

  <img src="img1.jpg"/>

  <img src="img2.jpg"/>

  <img src="img3.jpg"/>

  </div>

  </div>

</div>

</body>

 

Чтобы все заработало как надо, необходимо добавить следующий CSS:

.adaptivSlayder {

  position: relative;

  max-width: 710px;

  margin: 65px auto;

  box-shadow: 0 9px 18px -4px rgba(0, 0, 0, 0.69);

}

 

.adaptivSlayder input[name="kadoves"] {

  display: none;

}

 

.kadoves {

  position: absolute;

  left: 0;

  bottom: -35px;

  text-align: center;

  width: 100%;

}

 

.kadoves label {

  display: inline-block;

  width: 7px;

  height: 7px;

  cursor: pointer;

  margin: 0 2px;

  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .7);

  border-radius: 55%;

  border: 4px solid #2f363c;

  background-color: #738290;

}

 

#slaid1:checked~.kadoves label[for="slaid1"] {

  background-color: white;

}

 

#slaid2:checked~.kadoves label[for="slaid2"] {

  background-color: white;

}

 

#slaid3:checked~.kadoves label[for="slaid3"] {

  background-color: white;

}

 

.adaptivSlayderlasekun {

  overflow: hidden;

   

}

 

.abusteku-deagulus {

  display: flex;

  width: 100%;

  transition: all 0.6s;

}

 

.abusteku-deagulus img {

  width: 100%;

  flex-shrink:0;

}

 

#slaid1:checked~adaptivSlayderlasekun abusteku-deagulus {

  transform: translate(0);

}

 

#slaid2:checked~.adaptivSlayderlasekun .abusteku-deagulus {

  transform: translateX(-100%);

}

 

#slaid3:checked~.adaptivSlayderlasekun .abusteku-deagulus {

  transform: translateX(-200%);

}

 

В CSS показан общий принцип реализации слайдера. Вы смело можете писать туда свои значения, чтобы слайдер «как родной» вписался в ваш проект.

 

Заключение

Слайдер — это способ задержать внимание посетителя вашего ресурса, поэтому если дизайн вашего сайта позволяет использовать слайдер, то почему бы этим не воспользоваться. Тем более что реализовать слайдер можно на чистом CSS и HTML.



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Какой хостинг выбрать для сайта

Какой хостинг выбрать для сайта

Для беспроблемного функционирования сайта на просторах интернета необходимо ...

15 Февраля 2021    Web

Как и на чём лучше писать сайты?

Как и на чём лучше писать сайты?

Каждый начинающий сайтостроитель мечтает создать свой уникальный сайт на ко ...

21 Февраля 2021    Web

Ищем качественный и недорогой хостинг? Тогда вам сюда

Ищем качественный и недорогой хостинг? Тогда вам сюда

Рано или поздно всем вебмастерам приходится искать хостинг для своего проек ...

21 Февраля 2021    Web



Напишем