ZorNet.Ru — сайт для вебмастера » HTML и CSS » Супер простой текстовый слайдер jQuery

Супер простой текстовый слайдер jQuery

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

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

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

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

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

Приступаем к установке:

Нужно подключить библиотеку, разве только это не касается конструктора uCoz, у которого он уже подключен при создание интернет ресурса.

HTML

Код

<body>
<div id="negavsename">
  <div class="paukopa-mevunad">
  <div id="nadukopasmev"><a id="prev" href="#"><</a><a id="next" href="#">></a> </div></div>
  <div id="cokudanegav">
  <ul>
  <li class="vodesamub">
  <div class="mosgesaelegan">
  <p class="keguele-gainsengs"><span class="gudesign-sakegueleg">"</span> Бизнес никогда не получается так, как кажется, когда вы начинаете. Всегда есть неожиданные препятствия. Самыми крупными из них являются, как правило, трубопровод продаж, люди, деньги и производительность.<class="gudesign-sakegueleg">"</span>

  </p>
  </div>
  <div class="bunonsypovucan">
  <p class="poxecanm-sagusaeleg">ZorNet - портал для вебмастера</p>
  </div>
  </li>
  <li class="vodesamub">
  <div class="mosgesaelegan">
  <p class="keguele-gainsengs"><span class="gudesign-sakegueleg">"</span>Единоличное владение - это самый основной бизнес субъект. Единоличное владение означает, что один человек несет единоличную ответственность за прибыль и долги бизнеса.<span class="gudesign-sakegueleg">"</span>

  </p>
  </div>
  <div class="bunonsypovucan">
  <p class="poxecanm-sagusaeleg">ZorNet.Ru - сайт для вебмастера</p>
  </div>
  </li>
  <li class="vodesamub">
  <div class="mosgesaelegan">
  <p class="keguele-gainsengs"><span class="gudesign-sakegueleg">"</span>Общество с ограниченной ответственностью (LLC) - структура, которая позволяет владельцам, партнерам или акционерам ограничивать личную ответственность<span class="gudesign-sakegueleg">"</span>

  </p>
  </div>
  <div class="bunonsypovucan">
  <p class="poxecanm-sagusaeleg">ZorNet - ресурс вебмастера</p>
  </div>
  </li>
  </ul>
  </div>
  </body>

CSS

Код

body{
background:#255979;
}

#negavsename {
position: relative;
width:60%;
margin:0 auto;
}

#cokudanegav {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}

#cokudanegav ul {
list-style: none;
width:100%;
height:250px;
margin: 0;
padding: 0;
position: relative;
}

  #cokudanegav li {
width:100%;
height:250px;
float:left;
text-align: center;
position: relative;
font-family:lato, sans-serif;
}

.paukopa-mevunad{
  max-width: 346px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 40px;
  width: 100%;
}

  #nadukopasmev {
padding:0 0 5px 0;
float:right;
}

#nadukopasmev a {
  text-align: center;
  display: block;
  font-size: 47px;
  float: left;
  outline: 0;
  margin: 0 58px;
  color: #a2d8f9;
  text-decoration: none;
  display: block;
  padding: 10px;
  width: 34px;
}

a#prev:hover, a#next:hover {
color:#f1f1f1;
text-shadow:.5px 0px #5a43b1;
}

.keguele-gainsengs, .poxecanm-sagusaeleg {
font-family:sans-serif;
font-weight:300;
display: table-cell;
vertical-align: middle;
padding: 4px 19px;
font-family:'Lato', Calibri, Arial, sans-serif;
}

.keguele-gainsengs {
height: 173px;
font-size:23px;
color:#f1f1f1;
font-style:italic;
text-shadow:.5px 0px #5a43b1;
}

.gudesign-sakegueleg {
font-size:30px;
padding:0 3px 3px;
position:inherit;
}

.poxecanm-sagusaeleg {
font-style:normal;
font-size:18px;
color:#9e9e9e;
font-weight:400;
height: 15px;
}

.mosgesaelegan, .bunonsypovucan {
display: table;
width: 100%;
}

Код

$(document).ready(function () {
  var speed = 5000;
  var run = setInterval(rotate, speed);
  var cokudanegav = $('.vodesamub');
  var container = $('#cokudanegav ul');
  var elm = container.find(':first-child').prop("tagName");
  var item_width = container.width();
  var previous = 'prev';
  var next = 'next';
  cokudanegav.width(item_width);
  container.parent().width(item_width);
  container.width(cokudanegav.length * item_width); //set the cokudanegav container to the correct total width
  container.find(elm + ':first').before(container.find(elm + ':last'));
  resetcokudanegav();

  $('#nadukopasmev a').click(function (e) {

  if (container.is(':animated')) {
  return false;
  }
  if (e.target.id == previous) {
  container.stop().animate({
  'left': 0
  }, 1500, function () {
  container.find(elm + ':first').before(container.find(elm + ':last'));
  resetcokudanegav();
  });
  }

  if (e.target.id == next) {
  container.stop().animate({
  'left': item_width * -2
  }, 1500, function () {
  container.find(elm + ':last').after(container.find(elm + ':first'));
  resetcokudanegav();
  });
  }

  //cancel the link behavior
  return false;

  });

  container.parent().mouseenter(function () {
  clearInterval(run);
  }).mouseleave(function () {
  run = setInterval(rotate, speed);
  });


  function resetcokudanegav() {
  container.css({
  'left': -1 * item_width
  });
  }

});

function rotate() {
  $('#next').click();
}

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

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

Демонстрация

26 Февраля 2019 Загрузок: 1 Просмотров: 1290 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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