Как сделать слайдер на сайт html

Как сделать слайдер на сайт html

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

Слайдер можно прикрутит на любой сайт html, с базовыми знаниями html+css. Их по другому называют Ротатор, изменяющимися картинками ссылающихся на определенные страницы сайта. Во многих сайтах ныне - можно увидеть красочные слайдеры, которые украшает сайт и делает его информативным и привлекательным.

Давайте приступим установке слайдера на сайт HTML

Задача сделать вот такой вот, слайдер (Ротатор)

Image Description
Image Description
Image Description

Сперва нужно скачать сам скрипт Скачать | разработчик слайдера owlgraphic


После загрузки файла, нужно разархивировать с помощью архиватора winrar или любого, другого архиватора.

После разархиваций, увидите следующее: Нужно скопировать все по папкам, вашего сайта, если нет еще таких категорий, как js, css просто создайте ее.

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

И теперь подключаем сам слайдер - для этого в области

<head> </head>

Пишем: таким образом!

<head>

<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</head>


А в тело документа html

<body> </body>

Пишем: таким образом!

<body>

<div id="slider">

<div class="slide"><a href="#"><img src="images/01.jpg" alt="Название картинки" border="0"></a></div>

<div class="slide"><a href="#"><img src="images/02.jpg" alt="Название картинки" border="0"></a></div>

<div class="slide"><a href="#"><img src="images/03.jpg" alt="Название картинки " border="0"></a></div>

</div>

</body>

Если 3 картинок, слайдера вам мало то добавляем сколько вам угодно.

<div class="slide"><a href="#"><img src="images/04.jpg" alt="Название картинки " border="0"></a></div>

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


Если нужно сменит название кнопки на свое усмотрение.

То, тогда идем ранее скачавшему скрипту, который был должен, находиться в папке js находим там файл с именем owl.carousel.min.js и открываем редакторе который пользуетесь вы. В строчке 46. navigationText:["prev","next"] изменяем, где написано красным, на ваша усмотрение.


 


Пожалуйста ответьте на вопросы

Обратите внимание! А тут, Заработайте! Ваши первые 1030 тенге, сейчас!

Срочно нужны деньги?
MoneyMan KZ
Яндекс.Метрика


Понравилось статья? ставь Лайк!

Оставьте комментарий - будем общаться!

© Tenge-online.kz | Все права защищены 2014-2016 год.