Webasyst, слайдер записей блога, с картинками

7 июня 2019

В Webasyst слайдер записей блога с картинками можно с помощью Slick карусели 

Как добавить изображение к записи блога я писал ранее, писал и про вывод карусели изображений с помощью Slick. Гляньте, там вы узнаете как подключить и настроить Slick.

Итак вот готовое решение вывода записей блога с картинками в слайдере. 

{$latest_posts = $wa->blog->posts()}
<div class="slider slider-1">
    {foreach $latest_posts as $post}
    <div>
        {if $post.image}
        <img src="/wa-data/public/site/blogpic/{$post.image}" class="img-responsive" alt="Запись блога">
        {/if}
        <h3>
            <a href="{$post.link}">{$post.title}</a>
            {* @event prepare_posts_frontend.%plugin_id%.post_title *}
            {if !empty($post.plugins.post_title)}
            {foreach $post.plugins.post_title as $plugin => $output}{$output}{/foreach}
            {/if}
        </h3>
        <div>
            {if $post.user.posts_link}
            <a href="{$post.user.posts_link}">{$post.user.name}</a>
            {else}
            {$post.user.name}
            {/if}
            {$post.datetime|wa_datetime:"humandate"}
        </div>
        <p>
            {$post.text|strip_tags|truncate:160}
        <br><a href="{$post.link}">Подробнее »</a>
        </p>
        
    </div>
    {/foreach}
</div>
<script type="text/javascript">    
    $(document).ready(function(){ 
        $('.slider-1').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000, 
            dots: false,
            adaptiveHeight: true,
            centerMode: false,
            variableWidth: false,
            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>

Стилей оформления тут нет, совсем нет. Поэтому оформляйте по своему усмотрению. Можно сделать типа такого например