img-slider
En
(via Google Translate) Description: just another js-slider for pictures
Project structure
Directories:
- dist -- compiled js/css.
- imgs -- pictures for example.
- src -- sources
Files:
- index.html -- page with an example article and two sliders in it.
How to use:
in <head> place code like this:
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/index.css">
<!--[if !IE]><!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<!--<![endif]-->
<!-- IE - must die!!1-->
<script src="./dist/index.js"></script>At the end of <body> place the code:
<script>
let element = document.querySelector('.content'); // insert the desired selector
contentSlider.init(element); // or as an argument pass the DOM element
</script>Or on the DOMContentLoaded event, call:
contentSlider.init(element);in the right place where the slider should be located place html:
<div class="contentSlider">
path/to-image-01.png
path/to-image-02.png
path/to-image-03.png
</div>Image addresses are separated by a space character corresponding to the regular expression /\s/img (space / enter)
The parameter classes are available for the container: .param-statusbar .param-downloadbutton .param-zoom
- .param-statusbar - Show the status bar. The status displays information about which image on the account from the list is displayed (1/10).
- .param-downloadbutton -- Show upload image button
- .param-zoom -- The ability to deploy the inspector to the entire browser screen.
Example:
<div class="contentSlider param-statusbar param-downloadbutton param-zoom">
path/to-image-01.png
path/to-image-02.png
path/to-image-03.png
</div>Ru
Описание: очередной js-слайдер для картиночек
Структура
Папки:
- dist -- скомпилированные js/css
- imgs -- картинки для примера.
- src -- исходники
Файлы:
- index.html -- стр. с примером статьи и двумя слайдерами в нем.
как запустить:
В <head> вставить код подобный этому:
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/index.css">
<!--[if !IE]><!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<!--<![endif]-->
<!-- IE - must die!!1-->
<script src="./dist/index.js"></script>В конце <body> разместить код:
<script>
let element = document.querySelector('.content'); // вставить нужный селектор
contentSlider.init(element); // или как аргумент передать DOM элемент
</script>или по событию DOMContentLoaded вызвать:
contentSlider.init(element);в нужном месте, где должен располагаться слайдер разместить html:
<div class="contentSlider">
path/to-image-01.png
path/to-image-02.png
path/to-image-03.png
</div>Адреса изображений разделяются пробельным символом соответствующим регулярному выражению /\s/img (пробел/ввод)
Для контейнера доступны классы-параметры: .param-statusbar .param-downloadbutton .param-zoom
- .param-statusbar -- Показывать полосу статуса. В статусе отображается информация о том, какое изображение по счету из списка показывается (1 / 10).
- .param-downloadbutton -- Показывать кнопку "загрузить изображение"
- .param-zoom -- Возможность разворачивать осмотрщик на весь экран браузера.
Пример:
<div class="contentSlider param-statusbar param-downloadbutton param-zoom">
path/to-image-01.png
path/to-image-02.png
path/to-image-03.png
</div>