Webasyst, карусель изображений из приложения Фото

5 июня 2019

Карусель изображений из приложения Фото. Готовое решение, которое можно реализовать не только на собственном хостинге, но и на облаке Webasyst 

Сделано на базе популярной карусели Slick, картинки с описаниями подгружаются из заданного альбома приложения Фото, получается примерно так

Для начала нужно СКАЧАТЬ АРХИВ

В админке Сайт/Файл-менеджер создайте папку slick

В папке slick создайте папку fonts.

Загрузите содержимое архива по соответствующим директориям (в соответствующие папки). Должно получиться так

Подключаете в вашей теме дизайна скрипт и стили карусели. Сайт/Дизайн (выбирайте вашу тему)/Шаблоны, index.html, перед закрывающим </head> добавить

{* Slider *}
<link rel="stylesheet" type="text/css" href="/wa-data/public/site/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/wa-data/public/site/slick/slick-theme.css">
<script src="/wa-data/public/site/slick/slick.js" type="text/javascript" charset="utf-8"></script>

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

Вот код вставки карусели в файл темы, или в блок

{if $wa->photos}
{$photos = $wa->photos->photos("/album/3", "200")}
<div class="slider slider-1">
    {foreach $photos as $photo}
    <div class="text-center">
        <img src="{$photo.thumb_200.url}" alt="{$photo.name}.{$photo.ext}">
    </div>
    {/foreach}
</div>
{/if}
<script type="text/javascript">    
    $(document).ready(function(){ 
        $('.slider-1').slick({
            slidesToShow: 6,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000, 
            dots: false,
            adaptiveHeight: true,
            centerMode: true,
            variableWidth: true,
            arrows: true,
            appendArrows: $('.slider-1'),
            responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    infinite: true
                }
            },
            {
            breakpoint: 980,
            settings: {
            slidesToShow: 3,
            slidesToScroll: 1
            }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
            ]
        });
    });
</script>

тут 

("/album/3", "200") - номер альбома и разрешение изображений

- тоже поменять под нужное разрешение изображений

Эти значения проще всего взять в альбоме

в карусели есть настройки отображения, основные меняются в коде вставки

slidesToShow: 6 - количество отображаемых картинок 

slidesToScroll: 1 - сколько картинок пролистывается одновременно

для разной ширины экрана breakpoint эти значения можно менять

autoplay: true - автолистание

autoplaySpeed: 3000 - скорость автолистания

dots: false - точечки внизу карусели (в данном случае выключены)

adaptiveHeight: true - адаптивная высота блоков

centerMode: true - выравнивание по центру

variableWidth: true - разная ширина изображений

arrows: true - боковые стрелки включены

Остальное отображение меняется в файлах стилей карусели