Красивое слайдшоу с помощью jQuery

ГлавнаяJava скрипты → Красивое слайдшоу

Рассмотрим пример - Красивое слайдшоу, которое было создано с помощью jQuery, CSS и не большого блока HTML.

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

Пример работы - Красивое слайдшоу


Теперь перейдём непосредственно к самому скрипту. Для установки скрипта на свой сайт скачайте архив со скриптом "Красивое слайдшоу" (ссылка внизу), залейте к себе на сервер и распакуйте его там.

Затем вставьте этот код перед закрывающимся тегом </head>


<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />
 
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/droid_sans_400-droid_sans_700.font.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>

Далее пропишите у себя на странице, где будет установлен ваш Слайдшоу следущий код:

Код для html


<div id="coin-slider"> 
 <a href="#"><img src="images/slide1.jpg" width="540" height="250" alt="" /></a> 
 <a href="#"><img src="images/slide2.jpg" width="540" height="250" alt="" /></a> 
 <a href="#"><img src="images/slide3.jpg" width="540" height="250" alt="" /></a> 
 <a href="#"><img src="images/slide4.jpg" width="540" height="250" alt="" /></a> 
 <a href="#"><img src="images/slide5.jpg" width="540" height="250" alt="" /></a>
 <a href="#"><img src="images/slide6.jpg" width="540" height="250" alt="" /></a>
 <a href="#"><img src="images/slide7.jpg" width="540" height="250" alt="" /></a>
</div>

В этом коде использованы мои картинки для примера, вы соответственно замените их на свои. Чтобы изменить размеры Слайдшоу поменяйте значения ширины и высоты в HTML коде и в script.js (в самом начале скрипта).

У кого будут какие вопросы - задавайте смело и не стесняйтесь, вместе разберём вашу проблему, а так же кому понравился скрипт - нажимаем Лайки и оставляйте свои комментарии.


Скачать скрипт Красивое слайдшоу

Хочу в следующей статье научить Вас, как сделать ротатор картинок в качестве баннеров с автоматическим показом. И поможет нам в этом скрипт ротатор баннеров.

Поделись ссылкой с друзьями:

Комментарии к статье

Станислав 08-08-2013

Спасибо за хороший скрипт! Только при установки слайдшоу на jQuery у меня каким-то образом исчезли загаловки (H1-H3) Не подскажите как исправить, потому как точно из-за скрипта, до этого всё исправно было.

Admin 09-08-2013

Здравствуйте, Станислав!
Всё легко и просто исправляется: открываете папку "js", затем файл - "script.js" и удаляете в последней строке нужные вам заголовки. Либо просто здесь же в этой строке измените значение "hover:true" на "hover:false".
Всё должно нормализоваться!

Станислав 12-08-2013

Всё "ОК" - благодарю)))
Получилось по первому варианту - сделал нужные удаления заголовков.

Анатолий 20-11-2013

Admin тебе цены нету!
Я так давно искал эту программу и скрипт, СПАСИБО ТЕБЕ!!! И спасибо что научил как бесплатно качать с летитбит и пр. РЕСПЕКТ!!!

Екатерина 02-12-2013

Прошу помогите!
Я только учусь. объясните, для чего нужен каждый скрипт?
Как заменить слова с заливкой next, hrev на стрелочки? И как отдельно написать скрипт для вертикального раскрывающегося меню?

Admin 09-12-2013

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

Саня 03-12-2013

Как говорит мой сын: ...я болдю!
Первый раз в жизни установил скрипт в котором не нужна что-то дописывать, удалять, что-то менять.
Короче, Огромное спасибо. КЛАСС!!!

Михаил 13-10-2014

Здравствуйте!
Подскажите пожалуйста, как изменить время показа слайдов в слайдшоу с помощью jQuery.

Admin 13-10-2014

Добрый вечер!
Откройте скрипт: coin-slider.min.js
Там в последней строчке есть параметр: delay:3000
что означает - 3 секунды (в тысячу раз меньше). Вот и меняйте его под свои нужды.

Вика 24-11-2014

Респект автору! огромное спасибо!!
вообще без изъянов все установилось.. до сих пор поверить не могу )