RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Май
11

Делаем слайдер для сайта html

Всем привет. В этой статье я постараюсь разобрать тему слайдер для сайта html. Этот дизайн элемент сайтов, из роскоши практически перерос в стандартную необходимую повседневность. Слайдер для сайтов функционален, информативен, красив и прост в установке. Итак, что же называется слайдером?

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

слайдер для сайта
Таким образом, можно выделить два основных типа слайдеров: выполненные в виде картинки и текстовые.

Слайдер для wordpress

  Ввиду того что wordpress это самая популярная CMS для сайта в интернете, поэтому для нее мы узнаем как сделать в первую очередь слайдер для wordpress. Итак, в интернете имеется два плагина слайдеров vSlider и M-vSlider. Лучшим из них мне показался плагин слайдер для wordpress – это M-vSlider. А почему, вы можете узнать взглянув на вкладки настроек этих плагинов:

  • Настройки плагина vSlider:

vslider 4.1.1

Скачать плагин vSlider 4.1.1

Как видите возможности настроек плагина очень широки:

  • Есть возможность установки размера слайдера картинок;
  • Есть возможность установки промежутка между показами слайдов;
  • Есть возможность установки на  слайдер для wordpress — ссылки на любую статью;
  • Широкая возможность выбора шрифтов и размера и цвета ссылки;
  • Поддержка различных эффектов перехода между слайдами;
  • Добавление произвольного текста к каждому слайду;
  • Вывод слайдера в определенных категориях;

Для того чтобы этот слайдер для wordpress отображался у вас на сайте необходимо, создать новый слайдер  изображений к примеру под названием авс, далее открыть в админ панели вкладку: внешний вид/редактор и выбрать в правой колонке файл: header.php и вставить в нужное место отображения слайдера следующий html код:

<?php if (function_exists('vslider')) { vslider('abc'); }?>
  • Настройки плагина M-vSlider

m-vslider 2.1.3

Скачать плагин M-vSlider 2.1.3

У этого плагина имеются все те же самые настройки, что и у предыдущего. Плюс в дополнение к ним:

  • Настройки CSS стилей отображения;
  • 16 вариантов настроек анимации;
  • Специальный виджет для расположения слайдера для wordpress в сайдбаре или подвале сайта;
  • Возможность добавления на страницы при помощи шорткодов;

Слайдер для сайта html с применением Jquery

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

Но, одно я все равно хотел бы у вас спросить: «Как часто вы собираетесь менять настройки слайдера?» Ответ прост и очевиден: один раз сделал, добавил картинки и ссылки на нужную информацию и забыл про него на долгие годы.

Итак, поехали слайдер для сайта html мы будем делать как на скрине ниже:

красивый слайдер html

demodownload
Этот слайдер html очень легкий в установке, а по функциональности он просто супер: в навигации есть стрелочки прокрутки слайдов, чтобы посмотреть следующий слайд или вернуться к предыдущему, внизу есть специальные буллиты, с помощью которых тоже можно управлять слайдами, и красивый индикатор времени смены слайдов в виде круга с движущейся красной полоской в правом верхнем углу.

Установка слайдера для сайта html

Для начала скачиваем архив, и распаковываем в корень сайта. После этого, подключаем Jquery библиотеки скриптов к сайту, добавляя перед тегом</head> следующие строчки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Далее, подключаем сам скрипт, добавляя его перед тегом </head>:

<script src="js/allinone_contentSlider.js" type="text/javascript"></script>
<script> jQuery(function() {
jQuery('#allinone_contentSlider_surprise').allinone_contentSlider({
skin: 'surprise',
width: 960,
height: 384,
autoHideBottomNav:false,
showPreviewThumbs:false,
autoHideNavArrows:false
});
});
</script>

А теперь, между тегами <body></body> в нужное для отображения слайдера место, вставляем html разметку слайдера:

<div style="width:960px;margin: 0 auto; padding:10px 0 0 0;">
<div id="allinone_contentSlider_surprise">
<ul>
<li data-text-id="#allinone_contentSlider_photoText1"></li>
<li data-text-id="#allinone_contentSlider_photoText2"></li>
<li data-text-id="#allinone_contentSlider_photoText3"></li>
<li data-text-id="#allinone_contentSlider_photoText6"></li>
</ul>
<!-- TEXTS -->
<div id="allinone_contentSlider_photoText1">
<div data-initial-left="150" data-initial-top="10" data-final-left="30" data-final-top="10" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/surprise1.png" width="444" height="364" alt=""/></div>
<div data-initial-left="0" data-initial-top="25" data-final-left="380" data-final-top="25" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div data-initial-left="0" data-initial-top="50" data-final-left="378" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.5">Et harum quidem <br />rerum facilis</div>
<div data-initial-left="420" data-initial-top="180" data-final-left="420" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.5">Temporibus autem quibusdam et aut officiis debitis<br /> aut rerum necessitatibus saepe eveniet ut et voluptates</div>
<div data-initial-left="420" data-initial-top="230" data-final-left="420" data-final-top="220" data-duration="0.5" data-fade-start="0" data-delay="0.7">Itaque earum rerum hic tenetur a sapiente</div>
<div  class="allinone_contentSlider_text_line" data-initial-left="200" data-initial-top="170" data-final-left="380" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.9"><img src="img/listIcon.png" width="28" height="26" alt=""/></div>
<div  class="allinone_contentSlider_text_line" data-initial-left="200" data-initial-top="220" data-final-left="380" data-final-top="220" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/listIcon.png" width="28" height="26" alt=""/></div>
<div  class="allinone_contentSlider_text_line" data-initial-left="730" data-initial-top="90" data-final-left="710" data-final-top="90" data-duration="1.7" data-fade-start="0" data-delay="2.5"><img src="img/surprise2.png" width="209" height="335" alt=""/></div>
</div>

<div id="allinone_contentSlider_photoText2">
<div data-initial-left="150" data-initial-top="35" data-final-left="270" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/surprise22.png" width="650" height="367" border="0" alt=""/></div>
<div data-initial-left="378" data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0.5">rerum facilis</div>
<div data-initial-left="380" data-initial-top="130" data-final-left="55" data-final-top="130" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>

<div id="allinone_contentSlider_photoText3">
<div  class="allinone_contentSlider_text_line textElement31r_surprise" data-initial-left="80" data-initial-top="10" data-final-left="80" data-final-top="10" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="">Dominate the header!</a></div>
<div  class="allinone_contentSlider_text_line textElement32r_surprise" data-initial-left="77" data-initial-top="150" data-final-left="77" data-final-top="45" data-duration="0.5" data-fade-start="0.7" data-delay="1.1">Et harum quidem <br />rerum facilis</div>
<div  class="allinone_contentSlider_text_line" data-initial-left="580" data-initial-top="0" data-final-left="580" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.0"><img src="img/gift2.png" width="300" height="357" alt=""/></div>
<div  class="allinone_contentSlider_text_line" data-initial-left="100" data-initial-top="85" data-final-left="100" data-final-top="85" data-duration="0.5" data-fade-start="0.5" data-delay="0.7"><img src="img/gift1.png" width="597" height="293" alt=""/></div>
</div>

<div id="allinone_contentSlider_photoText6">
<div id="61" data-initial-left="280" data-initial-top="-30" data-final-left="280" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0">
<img src="img/1galaxy_s2.png" width="373" height="384" alt="" />
</div>

<div id="62" data-initial-left="45" data-initial-top="50" data-final-left="45" data-final-top="7" data-duration="0.5" data-fade-start="0" data-delay="0">
<img src="img/2galaxy_s21.png" width="196" height="376" alt="" />
</div>

<div id="63" data-initial-left="710" data-initial-top="50" data-final-left="710" data-final-top="7" data-duration="0.5" data-fade-start="0" data-delay="0">
<img src="img/3galaxy_aceplus.png" width="196" height="376" alt="" />
</div>

<div id="611" data-initial-left="100" data-initial-top="135" data-final-left="540" data-final-top="135" data-duration="0.5" data-fade-start="0" data-delay="0">
<a href="" target="_blank">Iphone 3GS</a>
</div>

<div id="612" data-initial-left="300" data-initial-top="85" data-final-left="25" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0">
<a href="" target="_blank">galaxy S</a>
</div>

<div id="613" data-initial-left="480" data-initial-top="85" data-final-left="850" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0">
<a href="" target="_blank">Iphone 4S</a>
</div>

</div> </div> </div>

Вот и все, слайдер если вы все сделали правильно, должен появиться у вас на сайте. Если вы захотите можно поменять настройки и загрузить другие картинки:

  • data-initial-left — отвечает за позицию с какой координаты с левой стороны будет выезжать блок
  • data-initial-top — отвечает за позицию с какой координаты сверху будет выезжать блок
  • data-final-left — конечная позиция элемента в слайдере, относительно левого края
  • data-final-top — конечная позиция элемента в слайдере, относительно верха
  • data-duration — с какой скоростью будет появляться изображение или текст
  • data-fade-start — прозрачность при стартовой позиции элемента (значение указывается в процентах)
  • data-delay — через какой время элемент начнет появляться (в секундах)

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

На этом все спасибо за внимание.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (1) на “Делаем слайдер для сайта html”

  • Сергей (17 коммент.) 13 Май 2014 в 10:31

    Для WordPress есть два нормальных слайдера, которые на самом деле заслуживают внимания, это Layer Slider и Revolution Slider, остальные на мой взгляд ничем особо не примечатеньны и в принципе не отличаются друг от друга

Оставить комментарий


вверх