Лого SiteHere.ru

Креативный слайдер для сайта jQuery — необычные слайдеры для сайта

Креативный слайдер для сайта

Много ли Вы видели разнообразных слайдеров? Я думаю достаточно, но этот слайдер для сайта выглядит очень креативно и необычно. Конечно, не так много мест, где его можно разместить, но то, что он сделает Ваш сайт более уникальным — это однозначно! На что похож эффекта этого слайдера? Возможно, у Вас в детстве была такая подзорная труба, где можно было крутить колесико и внутри появлялись различные фигуры, как мозаика.

Вот что я нашел на сайте еще на тему слайдеров:

Надеюсь Вы найдете что-то подходящее для себя из этой подборки. Если не нашли — тогда смотрите на слайдер для сайта, который мы рассмотрим в этой статье.

Посмотрите на слайдер для сайта jQuery по ссылке ниже:

Посмотреть примерСкачать

Вот как выглядят некоторые слайды из демо:

Пример слайдера 1
Пример слайдера 2
Пример слайдера 3

Как установить слайдер для сайта?

HTML часть

В качестве примера установки я выбрал Демо 1.

Подключаем между тегами <head> </head> следующие стили (normalize.css и component.css):

HTML КОД
1
2
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

Данные файлы стилей необходимо подключать для каждого вида слайдера.

Сейчас давайте взглянем на HTML структуру слайдера для сайта:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="content">
    <div class="cache">
        <img src="img/masks/prism-a.svg">
        <img src="img/masks/prism-b.svg">
        <img src="img/masks/prism-c.svg">
 
        <img src="img/bird-a.jpg">
        <img src="img/bird-b.jpg">
        <img src="img/bird-c.jpg">
        <img src="img/bird-d.jpg">
    </div>
 
    <div class="wrapper">
        <div class="prism-slider">
            <ul class="navigation"></ul>
        </div>
        <div class="copy">
            <!-- Текстовое описание -->
        </div>
    </div>
</div>

Что и в какой строчке находится:

  • Строка: с 3 по 5 — указываем какую маску использовать. Всего их три — столько же, сколько видов слайдера. Маска отвечает за то «безобразие», которое получается в центре слайдера.
  • Строки: с 7 по 10 — изображения для слайдера jQuery. Они «подхватываются» автоматически плагином, и затем добавляется соответствующее количество элементов управления.
  • Строка: 15 — здесь размещается динамически сгенерированная навигация по элементам слайдера.
  • Строка: 18 — в эту область Вы можете вписать своё описание для слайдера jQuery (также, как это сделано в демо).

Вы можете заменить изображения в папке img на свои собственные или же разместить свои изображения с произвольными названиями. После чего не забудьте их изменить в структуре HTML.

jQuery часть

Чтобы наш слайдер для сайта заработал перед закрывающим тегом </body> мы разместим несколько скриптов (rAF.js, easing.js, PrismSlider.js и slideshow1.js):

HTML&JS КОД
1
2
3
4
<script src="js/utils/rAF.js"></script>
<script src="js/utils/easing.js"></script>
<script src="js/PrismSlider.js"></script>
<script src="js/slideshow1.js"></script>

Последний скрипт необходимо выбирать в зависимости от того, какой из слайдеров Вам понравился. Если 1-й слайдер для сайта — тогда slideshow1.js, если 2-й слайдер — slideshow2.js, если 3-й слайдер — то выбираем slideshow3.js.



Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

16 комментариев к записи
  • Сергей

    😈 😈 😈 мне не нравится… слишком АВАНГАРДНО…. 😮

     
  • Александр

    А можно ли  подключить автопрокрутку этого чуда?

    спасибо

     
    • Юрий Немец

      Александр, можно, подключайте!

       
  • Александр

    А не подскажете, как сделать автопрокрутку, а то все переискал…

     
    • Юрий Немец

      Добрый день, Александр!

      Вам нужна автопрокрутка при клике?

       
  • Александр

    Забыл сказать, — СПАСИБО!

     
  • Александр

    Нет, автопрокрутка сразу по загрузке страницы

     
    • Юрий Немец

      Один из вариантов — это jQuery:

      $(document).ready(function(){
        $('#footer').animate({
        	scrollTop: $('#footer').get(0).scrollHeight
        }, 2000);
      });

      Где #footer — это блок с идентификатором footer (<div id="footer">Lorem ipsum</div>).

       
  • Александр

    Простите великодушно, надо менять код в существующем скрипте, или добавить?

     
  • Валерий

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

     
    • Юрий Немец

      Спасибо, Валерий!

      Надеюсь вы найдете еще много полезной информации на сайте. В свободное время стараюсь писать новые статьи. Буду рад видеть вас в рядах постоянных читателей! 🙂

       
      • Валерий

        Скажите Юрий, все данные материалы можно реализовать на CMS Joomla?

         
        • Юрий Немец

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

           
          • Валерий

            Спасибо большое, буду следить за вашими обновлениями. 

             
  • андрей

    Можно использовать этот слайдер на всю ширину шапки сайта 1208*668?

     
    • Юрий Немец

      Добрый день, Андрей!

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

      Вам лишь останется правильно разместить кнопки управления слайдером.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *