goos

KO | EN

gitlite — search

#python #typescript #golang #android #machine-learning #deep-learning #docker #macos #nodejs #java #windows #pytorch #mcp #open-source

(★ 8)

Good one Slider

goos Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Good one Slider

![Карусель](https://cs7055.userapi.com/c636625/v636625473/525ad/60RGkUCfLLw.jpg)

*Good one Slider* или коротко *Goos*, это очень простая карусель/слайдер/галерея, которая не требует никаких зависимостей,
очень мало весит, прекрасно работает на любых устройствах и очень просто настраивается.
 
#### Основные отличительные черты:
- Все визуальные настройки только в CSS
- Все анимации только в CSS
- Вычисление размеров браузер производит самостоятельно на основе стилей
- Нет вычислений в скриптах, поэтому нет тормозов при ресайзе
- Вся адаптивность через медиа-выражения 
- Изменение количества видимых элементов не ломает логику скриптов
- Нативные события на мобильных устройствах
- Деградирует до нативного скролла, если нет скриптов или что-то пошло не так
- Без проблем инициализируется из скрытого элемента
- Можно добавлять новые элементы во время анимации
- Легко расширяется и допиливается под свои нужды

#### Минусы:
- Вам нужно знать CSS.

## Полезные ссылки
- [Демо](https://baribadamshin.github.io/goos/demo/)
- [Документация](https://github.com/baribadamshin/goos/wiki)

### Установка
- Правильный способ: `npm install goos`
- [Скачать архивом](https://github.com/baribadamshin/goos/releases)

## Быстрый старт

#### Подключение
Goos собран как универсальный модуль &mdash; [UMD](https://github.com/umdjs/umd)

```html

<link href="path/to/goos.min.css" rel="stylesheet" />
<script src="path/to/goos.min.js"></script>

const goos = require('goos'); 
```

#### Разметка
Если вы знакомы с методологией [БЭМ](https://ru.bem.info), разобраться будет очень просто.
```html

<div class="goos goos_margin goos_responsive goos_size_4">
    <ul class="goos__shaft">
        
        <li class="goos__item"><div class="snippet">1</div>
        <li class="goos__item"><div class="snippet">2</div>
        <li class="goos__item"><div class="snippet">3</div>
        
        <li class="goos__item"><div class="snippet">30</div>
    </ul>
</div>
```

#### Инициализация
После подключения библиотеки, вам будет доступна глобальная функция `goos(blocks, [options])`
```html
<script>
    /**
     * @param {HtmlElement|HTMLCollection|NodeList} - DOM элемент(ы)
     * @param {Object} - опции
     */
    goos(document.querySelectorAll('.goos'), {
        current: 0, // активный элемент, по умолчанию первый
        enableArrows: true, // нарисовать стрелки, по умолчанию false
        enableDots: true, // количество экранов в виде точек под слайдером, по умолчанию false
        size: 4, // количество видимых элементов, по умолчанию используется значение из класса goos_size_{n}, либо 1,
        slideBy: 4, // по умолчанию равно size
    });
</script>
```

## Самостоятельная сборка
1. Форкнуть или клонировать репозиторий
2. `npm install`
3. `npm run build`

## Лицензия
MIT License

goos

goos Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

goos

goos Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README