KCGallery

Не требует подключения дополнительных библиотек.

Параметр	По-умолчанию	Описание
count	`true`	(true/false) показывать счетчик слайдов в рамках одной группы в панели инструментов
zoom	`true`	(true/false) показывать кнопки зума в панели инструментов
rotate	`true`	(true/false) показывать кнопки поворота слайда в панели инструментов
description	`true`	(true/false) показывать описание слайда
nav	`true`	(true/false) показывать кнопки навигации
minZoom	`10`	(int) Минимальный размер зума
maxZoom	`300`	(int) Максимальный размер зума
zoomStep	`20`	(int) Шаг зума
loop	`false`	(true/false) зацикливать слайды в наборе
sensitivityTouch	`10`	(int) чувствительность срабатывания свайпа
sensitivityTouchActive	`90`	(int) чувствительность проявления активности на свайп
timeoutHide	`5000`	(int) таймаут скрытия элементов управления
width	`80%`	(string) ширина области для слайда в %
height	`80%`	(string) высота области для слайда в %
maxWidth	`936px`	(string) максимальная ширина области для слайда в px
maxHeight	`600px`	(string) максимальная высота области для слайда в px
responsive	`{}`	(object) объект для изменения галереи в зависимости от ширины экрана

Пример иницилизация

css

<link rel="stylesheet" href="css/KCGallery.min.css">
<style>
    .slideItem{
        display: inline-block;
        position: relative;
        width: 200px;
        min-height: 100px;
        cursor: pointer;
    }
</style>

<script src="js/KCGallery.min.js"></script>

html

<div class="gallery">
    <img
            class="slideItem"
            data-kcg="img/100.jpeg"
            data-kcg-id="gallery"
            data-kcg-title="SVG to CSS converter"
            data-kcg-text="This tool converts SVG code into a Data URI, an encoded URL format that can be used as a background-image source. In plain terms, you can place this converted SVG code directly into CSS and avoid the need for uploading image files, cutting down on the number of server requests."
            src="img/100.jpeg" alt="">
    <img class="slideItem" data-kcg="img/101.jpeg" data-kcg-id="gallery" src="img/101.jpeg" alt="">
    <img class="slideItem" data-kcg="img/102.jpeg" data-kcg-id="gallery" src="img/102.jpeg" alt="">
    <img class="slideItem" data-kcg="img/103.jpeg" data-kcg-id="gallery2" src="img/103.jpeg" alt="">
    <img class="slideItem" data-kcg="img/104.jpeg" data-kcg-id="gallery2" src="img/104.jpeg" alt="">
    <img class="slideItem" data-kcg="img/105.jpeg" src="img/105.jpeg" alt="">
    <img class="slideItem" data-kcg="img/106.jpeg" src="img/106.jpeg" alt="">
</div>

Иницилизация

if(typeof KCGallery==="undefined"){window['KCGallery']={'s':[],ready(f){this.s.push(f)}}}
KCGallery.ready(()=>{
    KCGallery.init('[data-kcg]');
});

Отложенный запуск

Если вы хотите выполнить свой код или иницилизировать слайдер исключительно после загрузки основной библиотеки, используйте следующий код:

if(typeof KCGallery==="undefined"){window['KCGallery']={'s':[],ready(f){this.s.push(f)}}}
KCGallery.ready(()=>{
    /*ВАШ КОД*/
});

KCGallery

Не требует подключения дополнительных библиотек.

Пример иницилизация

Отложенный запуск

Описание

Конвейеры