Приветствуем тебя, дизайнер, на сайте theps.art! Профессионал ты или начинающий, не важно. Главное — мы стали отличным местом для поселения и тех и других. Хочешь поделиться своими творениями с другими? Не вопрос. У нас ты встретишь самые адекватные оценки твоего творчества, получишь не мало хороших советов, обретешь множество общительных друзей и много чему научишься новому. Если ты устал от работы, то и в этом мы тебе поможем! На нашем сайте есть отличный кинотеатр. И небольшая коллекция онлайн игр.
Цифровой дизайн похож на живопись, только краски никогда не сохнут ©Neville Brody
Простой адаптивный слайдер
Простой адаптивный слайдер
/images/no_screen.png
  • Просмотров: 169
  • Скачиваний: 0
  • Комментариев: 0
  • Добавлено: 17.05.22, Вт
  • CSIL

В head подключаем скрипты и стили:
Код
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>

Между BODY:
Код
<div class="bxslider">
<div><img src="https://theps.3dn.ru/_ld/1/26697013.png" title="theps.3dn.ru"></div>
<div><img src="https://theps.3dn.ru/_ld/0/81892127.png" title="theps.3dn.ru"></div>
<div><img src="https://theps.3dn.ru/_ld/0/28634780.png" title="theps.3dn.ru"></div>
</div>

Где хотим видеть слайдер:
Код
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script>
</head>
<body>
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
</body>
</html>

  • Хочу скачать
  • Спасибо: +1
  • Сообщить о битой ссылке
  • 0 Mb

  Теги: Слайдер, Простой, Адаптивный   Источник: https://theps.art
Всего комментариев: 0
avatar