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

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

Ещё один красивый слайдер для сайта, о котором я решил подробно написать был позаимствован из шаблона WordPress. Вся красота данного слайдера заключается в необычном трехмерном эффекте при смене картинок.
Реализован такой красивый переход с помощью JavaScript и FLASH. Это необходимо учитывать при создании сайта под мобильные устройства, так как, например тот же андроид в своих последних версиях отказался от услуг флэш плеера. Как следствие, работа слайдера будет невозможна.

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

Но для тех, кто всё-таки решится установить красивый слайдер вот исходники и демо страница с примером слайдера.

слайдер для сайта

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

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

Первое, что надо сделать – это распаковываем исходники в корень сайта. Далее в <head></head> подключаем два файла «slider/js/swfobject/swfobject.js»

<script  type="text/javascript"  src="slider/js/swfobject/swfobject.js"></script>

и «slider/style.css»

<link  rel="stylesheet" href="slider/style.css"  type="text/css" media="screen" />

И тут же прописываем следующий код:

<script type="text/javascript">
  var flashvars = {};
  flashvars.xml =  "slider/config.xml";
  flashvars.font =  "slider/font.swf";
  var attributes =  {};
  attributes.wmode  = "transparent";
  attributes.id =  "slider";
  swfobject.embedSWF("slider/cu3er.swf",  "cu3er-container", "1150", "450", "9",  "expressInstall.swf", flashvars, attributes);
</script>

Второе: в <body></body> в нужном месте страницы сайта прописываем DIV, в котором будет крутиться наш красивый слайдер.

<div  class="cu3er_resize">
  <div id="cu3er-container">
    <a  href="http://www.adobe.com/go/getflashplayer"> <img  src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"  alt="Get Adobe Flash player" /></a>
  </div>
</div>

На этом установка слайдера закончена.

Настройка параметров

Основные параметры отображения слайдера  находятся в файле «slider/config.xml».
Здесь нужно задать <url> фото, <link> ссылки, <heading> - заголовок и <paragraph> - краткое описание. Так же можно поэкспериментировать и с другими параметрами, которые отвечают за внешний вид элементов слайдера.
Ещё один файл – «style.css» параметры, в котором тоже необходимо учитывать при изменении слайдера.

Комментарии по теме: "Красивый слайдер для сайта".

  1. автор Евгений

    Использовать более простой слайдер

  2. автор Света

    А как сделать переход что бы был простым и по шустрее?

  3. автор Евгений

    Время перехода слайдера - этот параметр не меняется.

  4. автор Дмитрий

    Скажите пожалуйста, а как изменить время перехода слайдера?

  5. автор Евгений

    Дмитрий, см. Настройка параметров
    в файле «slider/config.xml» задать путь до Вашего фото.

  6. автор Дмитрий

    Здравствуйте, Евгений! Я бы хотел узнать, как поменять картинки в Вашем слайдере?

  7. автор Евгений

    Если появляются красные полосы снизу и справа попробуйте увеличить размер изображений

  8. автор Игорь

    Хм, странно. В Интернет экслорере нормально идёт, а Гугл хром - снизу и справа изображения - красная полоса!

  9. автор Игорь

    Всё, разобрался сам! Прочитал внимательно предыдущий совет!

  10. автор Игорь

    Красивый слайдер! Извиняюсь, я - чайник. Есть несколько вопросов:
    1. Можно ли увеличит количество картинок?
    2. Как поменять всплывающее "WellSait.ru" на свою ссылку?
    Спасибо.

  11. автор Евгений

    tweenIn x="**" y="**" width="**" height="**" - отвечает за стрелочки (вправо и влево) и надпись внизу на полупрозрачном фоне.
    alpha="0.5" - прозрачность

  12. автор Кира

    Спасибо, я попробую. Просто у меня сайт в системе юкоз и не совсем стандартный шаблон.. но я попробую) Мне надо менять tweenIn x="**" y="**" width="**" height="**".. правильно? А за что отвечает параметр alpha? Извиняюсь за глупые наверное вопросы)
    Просто не могли бы более подробно написать (если не сложно) ? С остальным пунктами вроде проще...

  13. автор Евгений

    Кира, для изменения размеров слайдера необходимо:
    1. В файле "index.php" в строке:

    swfobject.embedSWF("slider/cu3er.swf", "cu3er-container", "1150", "450", "9", "expressInstall.swf", flashvars, attributes);

    изменить 1150 - ширина и 450 - высота:
    2. В файле "slider/config.xml" отредактировать параметры расположения элементов слайдера:

    x="**" y="**" width="**" height="**"

    3. В файле "slider/style.css"

    width="**" height="**"
    И заменить фото на соответствующие размерам.

  14. автор Кира

    Здравствуйте! Замечательный слайдер, но не могли Вы ответить на вопрос - как уменьшить его размеры и чтобы он отражался при этому корректно? Нужно чтобы картинки были размером 640 на 380. Можно также вариант и 620 на 280. Просто не очень в кодах разбираюсь и не знаю - что именно менять. Очень буду признательна за ответ. Можно на почту.

  15. автор Евгений

    Внутри этого тега можно прописать только одну ссылку

  16. автор Сергей

    Евгений. это я понимаю. я имел ввиду например у меня 10 ссылок, мне надо каждую ссылку данного слайда указывать между тэгами <url></url> или все 10 между этими тэгами вставить.

  17. автор Евгений

    Сергей, для каждого слайда (<slide></slide>) свои фотка, ссылка, заголовок и описание.

  18. автор Сергей

    доброго времени суток! извиняюсь за дубовый вопрос, но я новичёк в этом деле, место в скрипте где надо указать урл <url></url> все ссылки указывать между этими тэгами или каждую по отдельности

  19. автор Евгений

    Большая просьба, оставлять сообщения только по данной теме. Спам, реклама и т.д. будут удаляться.

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