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

24 августа 2018

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

Сделано на базе популярной карусели Slick, картинки с описаниями подгружаются из заданного альбома приложения Фото, в стиле отображения несколько классов от Bootstrap 3 (text-center, center-block, img-responsive), думаю запросто поправите под свои нужды

Итак, сама карусель в архиве по ссылке СКАЧАТЬ АРХИВ

Папку slick из архива положить в папку с вашей темой оформления

В вашей теме подключить скрипт и стили карусели

<link rel="stylesheet" type="text/css" href="{$wa_theme_url}slick/slick.css">
<link rel="stylesheet" type="text/css" href="{$wa_theme_url}slick/slick-theme.css">
<script src="{$wa_theme_url}slick/slick.js" type="text/javascript" charset="utf-8"></script>

Код вывода карусели вставить куда вам нужно

{if $wa->photos}
{$photos = $wa->photos->photos("/album/1", "512")}
<div class="slider slider-1">
    {foreach $photos as $photo}
    <div class="text-center">
        <img src="{$photo.thumb_512.url}" alt="{$photo.name}.{$photo.ext}" class="center-block img-responsive">
        {if $photo.description}<div class="sl-dsk text-center">{$photo.description}</div>{/if}
    </div>
    {/foreach}
</div>
{/if}
<script type="text/javascript">    
    $(document).ready(function(){            
        $('.slider-1').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000,
            arrows: true,
            appendArrows: $('.slider-1'),
            responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true
                }
            },
            {
            breakpoint: 980,
            settings: {
            slidesToShow: 1,
            slidesToScroll: 1
            }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    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>

В коде {$photos = $wa->photos->photos("/album/1", "512")} /album/1 - id альбома, 512 - размер миниатюры изображения. 

<img src='{$photo.thumb_512.url}' alt='{$photo.name}.{$photo.ext}' class="center-block img-responsive"> $photo.thumb_512.url - если меняете значение размера миниатюры, тут тоже надо менять

$('.slider-1').slick({
slidesToShow: 3,
slidesToScroll: 1,
- показывает 3 слайда, пролистывает по одному. Ну и там ниже по коду подставляете значения в зависимости от ширины экрана.

Собственно все.

Если хотите, мы можем сами установить и настроить это на вашем сайте за скромное вознаграждение. Наши контакты: