How to implement a custom Banner image carousel display effect in AnQiCMS and call it by group?

In website operation, the Banner carousel is an important component to attract users' attention, display core content, or promote activities.AnQiCMS as an efficient and flexible content management system provides multiple ways to implement a custom Banner image carousel effect and can be grouped according to different needs.This not only makes the website interface more dynamic and beautiful, but also accurately presents the content to the target users, improving operational efficiency.

AnQiCMS implements the strategy for Banner rotation

AnQiCMS has fully considered the diversity of content display in design, providing several practical strategies for Banner rotation.We can choose the most suitable implementation method based on the purpose and management granularity of the Banner image.

Strategy 1: Utilize the global Banner list for grouped calls (recommended)

1. Backend configuration: Create and manage Banner groups

The AnQiCMS admin interface usually includes a 'Banner Management' or similar module (although it is not directly listed in the provided documentation, the existence of the 'Home Banner List Tag' suggests this feature).Here, we can easily create and manage different Banner groups.

  • Create Banner group:We can name a group of Banners according to actual needs, such as 'Home Page Large Image', 'Corporate Culture Carousel', or 'Flash Sale'.Each group name should clearly reflect its purpose.
  • Upload Banner image:You can upload multiple images under each group. To ensure uniformity and beauty in the display, it is recommended to upload images of the same size and proportion.
  • Fill in the Banner information:Set the corresponding link address (Link), image description (Description), image alternative text (Alt), and title (Title) for each image.This information not only helps SEO, but also provides friendly hints when images fail to load and adds text descriptions to the carousel.

In this way, we can create an unlimited number of Banner groups in the background and configure multiple carousel images for each group, greatly enhancing the flexibility of Banner management.

2. Template invocation: flexible display by group

When calling these grouped Banners in the front-end template, the template tag feature of AnQiCMS is particularly powerful. We can usebannerListLabel, and throughtypeThe parameter specifies the Banner group to be called.

Suppose we created a Banner group named \index.htmlThis can be called in,

{% bannerList banners with type="首页大图" %}
    <div class="swiper-container my-banner-carousel">
        <div class="swiper-wrapper">
            {% for item in banners %}
            <div class="swiper-slide">
                <a href="{{item.Link}}" target="_blank">
                    <img src="{{item.Logo}}" alt="{{item.Alt}}" class="w-100" />
                    <div class="banner-caption">
                        <h3>{{item.Title}}</h3>
                        <p>{{item.Description}}</p>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
{% endbannerList %}

In this code block,{% bannerList banners with type="首页大图" %}It will get all Banner images under the “Home Big Picture” group, and then through{% for item in banners %}Loop through each image's information, includingitem.Logo(Image address),item.Link(Link),item.Alt(Image alternative text) anditem.Title(Title),item.Description(Description). External.swiper-containerandswiper-slideThe structure is reserved for the commonly used front-end Swiper carousel library HTML structure.

Strategy two: Set a dedicated Banner for specific categories or single pages.

In addition to the global group Banner, AnQiCMS also allows us to upload exclusive Banner images for specific document categories or single pages.The advantage of this method is that the Banner content has a stronger relevance to the category or page it belongs to, and it is also more intuitive to manage.

1. Backend configuration: Upload Banner in categories or single pages

  • Document category Banner:Enter AnQiCMS backend's 'Content Management' -> 'Document Category'.When editing a category, at the bottom of the category editing page, there is usually an option for a 'Banner image'.We can upload multiple images here, which will serve as the exclusive carousel banner for this category.
  • Single page Banner:Similarly, when editing a single page (such as the "About Us" or "Contact Us" page) under "Page Resources" -> "Page Management", you can also find the "Banner Image" option, and upload multiple exclusive Banner images for it.

2. Template Call: Precise Display Location

In the corresponding category list page template (for example{模型table}/list.html) or single page template (for examplepage/detail.html), we can usecategoryDetailorpageDetailTag to get these exclusive Banner images.

Call in the category page template:

{% categoryDetail categoryData with name="Images" %}
{% if categoryData %}
<div class="category-banner-carousel">
    <div class="category-banner-wrapper">
        {% for imageUrl in categoryData %}
        <div class="category-banner-slide">
            <img src="{{imageUrl}}" alt="{% categoryDetail with name='Title' %}" class="w-100" />
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

here,{% categoryDetail categoryData with name="Images" %}It will directly return an array of all Banner image URLs under the current category. LoopimageUrlYou can get the address of each image.

Call in the single-page template:

{% pageDetail pageData with name="Images" %}
{% if pageData %}
<div class="page-banner-carousel">
    <div class="page-banner-wrapper">
        {% for imageUrl in pageData %}
        <div class="page-banner-slide">
            <img src="{{imageUrl}}" alt="{% pageDetail with name='Title' %}" class="w-100" />
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

Similar to the category Banner,{% pageDetail pageData with name="Images" %}It is used to get the current single-page configuration Banner image array.

Implementation ideas for front-end carousel effects

AnQiCMS is responsible for providing the data for Banner images, while the actual carousel animation effect needs to be implemented through front-end HTML, CSS, and JavaScript.

  1. HTML structure:The above template code has shown the basic HTML structure, usually an outer container (such asdiv.swiper-container) wrapping a list of image containers (such asdiv.swiper-wrapper), it includes multiple image items such asdiv.swiper-slide), place each item in<a>Tags and<img>.
  2. CSS style:You need to set the appropriate size and overflow hidden for the carousel (`overflow: