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

Простой текстовый слайдер картинок на CSS

Как можно заметить, что слайдер стал неотъемлемой частью дизайн. Здесь идет текстовой аппарат, плюс к нему небольшое изображение. Что означает, то описание становится более актуальным, а вот картинка по правую сторону, она больше под ссылку сделана на переход на материал. Простой и удобный в установке, так как полностью настроен на стилях, что скриптов не нужно для работы.

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

Как пример, что DEMO посмотреть есть возможность.

Легкий слайдер контента с текстовой анимацией

Хотя вот эта рамка позволит редактировать по фиксации style="width: 53% вами заданной.

Как уже говорилось, на странице или в шапку подойдет.

Код

<table cellpadding="1" cellspacing="1" style="width: 53%;">
<tbody>
<tr>
<td>На протяжении многих лет эмуляция PlayStation 3 была противоречием. Уникальная архитектура процессора Cisco, известная как Cell Broadband Engine, принципиально отличается от любого другого процессора, который когда-либо выходил на рынок.</td>
  <td>
<link rel="stylesheet" href="http://zornet.ru/Aben/ABGEA/tuyruyy.css">
<div id="container">
  <div id="content-slideshow">
  <div id="slideshow">
  <div id="mask">
  <ul>
  <li id="first" class="first-animation">
  <a href="http://zornet.ru/"> <img src="http://zornet.ru/Aben/ABGEA/1.jpg" alt="Картины для интерьера"> </a>
  </li>

  <li id="second" class="second-animation">
  <a href="http://zornet.ru/"> <img src="http://zornet.ru/Aben/ABGEA/2.jpg" alt="Картины для интерьера"> </a>
  </li>

  <li id="third" class="third-animation">
  <a href="http://zornet.ru/"> <img src="http://zornet.ru/Aben/ABGEA/3.jpg" alt="Картины для интерьера"> </a>
  </li>
  </ul>
  </div>
  </div>
  </div>
</div>
  </td>
</tr>
</tbody>
</table>

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

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

16 Октября 2017 Просмотров: 2479 Комментариев: (0)

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

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

Kosten

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