Показать сообщение отдельно
  #4 (permalink)  
Старый 27.02.2016, 01:15
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Попробую написать как делать с обычным стандартным html файлом. Не вордпресс, не друпал и не другие дипа движки, а просто обычным index.html

1) В папке сайта создаёте папку где будут лежать картинки которые будут в этом слайдере.

2) Открываете index.html, например Notepad++(м)(спец.редактор для таких дел) на крайний случай Блокнотом и в области <body></body> там где вы хотите поставить слайдер, создаёте новый div, называете его, что б можно было в css редактировать, а потом вообще внизу после всего, после всех дивов и тд страницы уже добавляете скрипт (но не после тега </body>) например так:

<html>

<head>
</head>

<body>
<!------------------------слайдер------------------->
<div class="slider1">
<div id="NewCarousel">
<ul>
<li><img src="/image/carousel-1.jpg"></li>
<li><img src="/image/carousel-2.jpg"></li>
<li><img src="/image/carousel-3.jpg"></li>
<li><img src="/image/carousel-4.jpg"></li>
<li><img src="/image/carousel-5.jpg"></li>
<li><img src="/image/carousel-6.jpg"></li>
</ul>
</div>
</div>
<!----------------------------------------------------->
<!------------------------скрипт--------------------->
<script type='text/javascript'>
$(function(){
$("#NewCarousel").jCarouselLite({
auto: 3000,
speed: 1500,
circular: true,
visible: 3
});
});
</script>
<!----------------------------------------------------->
</body>

</html>


Стили (красоту, размеры и тд) пишите уже в отдельном css файле.

1) А если захотите скрипт тоже вынести в отдельный файл (так делают если на странице ооочень много всего и что б не захломлять и страница не весила миллион мегабайт), тогда надо создать в Notepad новую страницу, и туда скопировать внутреннее содержимое что между <script></script> потом сохранить в папку сайта в расширении jquerry в папку где будут лежать скрипты, а в верхушке сайта где <head></head> прописать путь к этому файлу скрипта типа:
<script type="text/javascript" src="js/script.js"></script>

src="js/script.js" -это путь к файлу (js -название папки)(script.js -название файла с скриптом)

2) Если Вы скачали скрипт, тогда просто распаковывайте его и прописывайте в index.html к нему путь( в этом случае создавать страничку в блокноте и тд не надо, всё и так уже готово только путь укажи)


[head]
<script type="text/javascript" src="js/script.js"></script><!--скрипт (папка/файл)(на случай если хотите вынести отдельно)-->
[/head]                                                    <!--если скрипт вписан в index.html, тогда эта строчка ненужна-->

<div class="slider1"><!--div карусели-->
<div id="NewCarousel"><!--сама карусель-->
 <ul>
   <li><img src="/image/carousel-1.jpg"></li><!--картинка-->
   <li><img src="/image/carousel-2.jpg"></li>
   <li><img src="/image/carousel-3.jpg"></li>
   <li><img src="/image/carousel-4.jpg"></li>
   <li><img src="/image/carousel-5.jpg"></li>
   <li><img src="/image/carousel-6.jpg"></li>
 </ul>
</div>
</div>

[script type='text/javascript']<!--скрипт карусели внутри страницы-->
$(function(){
    $("#NewCarousel").jCarouselLite({
     auto: 3000,
     speed: 1500,
     circular: true,
     visible: 3
    });
});
[/script]


Важную роль ещё играет css, скрипты только приводят в движение всё, а вот css задаёт размеры, местоположение, узкий и высокий или широкий и маленький, позиционирование его относительно других обьектов сайта, вид картинок, местоположение кнопочек и переключателей, прозрачность и фон и тд...
Поэтому ищите, всё не так сложно как с первого взгляда кажется.
Но, Вам, мне кажется, достаточно будет указать размер слайдера div-а (.slider1) всё остальное автоматически подгонится, мне кажется, ну и естественно его месторасположение по вверх, лево, низ, право.

И по пути к картинкам, у Вас написано src="/image/carousel-1.jpg", а точнее /image/carousel-1.jpg, у меня было иногда картинки не виделись и перед / я ставил две точки или вообще убирал и / и ../ оставлял только src="image/carousel-1.jpg", но у Вас по учебнику поэтому думаю тут нормально всё, это я так, на всякий случай сказал про путь к картинкам.

PS:
То, что Вы скачали, судя по скринам, это архивы, то-есть файлы со скриптом запакованы архиватором ZIP, такое после скачивания надо распаковывать в произвольную папку которую вы отфанаря сделаете, после распаковки там будут текстовые файлы в расширении js (типа: script.js), это и есть скрипты, эти файлы надо будет скопировать в папку где будут лежать все скрипты сайта и уже после всего этого открывать "блокнотом" index.html и дальше прописывать к этим файлам путь, что б подключить их к сайту.


Надеюсь понятно расписал, удачи

Последний раз редактировалось olmensk, 27.02.2016 в 02:20.
Ответить с цитированием