How to set up a dynamic carousel effect for the Banner image on the homepage of AnQiCMS website?

Setting a dynamic carousel banner on the homepage of AnQiCMS can effectively enhance the visual appeal of the website and convey key information.AnQiCMS provides flexible and intuitive features to help us achieve this goal.Next, we will step by step understand how to set up from the background to the front-end template editing, creating an animated carousel effect for the homepage.

1. Configure the Banner image in the background: content and grouping

First, we need to prepare the pictures and relevant information for the carousel in the AnQiCMS backend.AnQiCMS provides a special feature for managing banner images.

You need to log in to the website backend, find the "Content Management" or "Page Resources" entry under the management menu, and then access the "Banner Management" section.The specific location may vary depending on the theme or system version you are using, but there is usually a centralized place to manage the carousel images.

After entering the Banner management interface, we can create or edit the Banner image. Here, you will be able to:

• Upload image (Logo)This is the core part of the Banner image. It is recommended to upload images of uniform size and high quality to ensure visual consistency during the carousel.
• Set Link Address (Link)Add a link for each Banner image, which can be an in-site page or an external link.
• Fill in the description (Description)This is a brief description of the Banner image content, which can be displayed on the front end and can also be used as supplementary information for SEO.
• Define Alt text (Alt)This is an important description of the image, which helps search engines understand the content of the image, improves SEO, and also provides alternative text when the image fails to load.

It is especially worth mentioning that AnQiCMS supports Banner managementGrouping function. When creating or editing a Banner, you will see an option for 'Group Name (type)'.If you want the homepage banner image to be independent of other page banners (such as category pages or single page banners), you can specify a unique "group name" for the homepage banner image, such as "Homepage Carousel" or "HomepageCarousel".This way, when calling the front-end template, we can accurately display only the Banner images belonging to this group, maintaining the neatness and manageability of the content.

2. Locate and edit the homepage template file

After completing the Banner image settings on the backend, the next step is to edit the front-end template files, displaying these images on the homepage. The AnQiCMS template files are usually located in the root directory of the system./templateIn the folder, each topic has its own subdirectory. The template file on the homepage is usually namedindex.htmlorindex/index.html.

AnQiCMS's template system adopts a syntax similar to Django, which makes template writing both powerful and easy to understand.You can edit the template online in the "Template Design" feature in the background, or download it locally using FTP/SFTP tools.

3. Call the Banner list tag in the template

Open your home page template file first, find the position where you want the Banner image to be displayed. Next, we will use the built-in AnQiCMS.bannerListLabel to retrieve the Banner data configured on the backend.

If you have set a specific group name for the home page banner image in the background, such as "Home Carousel", then you need to specify the tag when calling it.typeparameters:

{% bannerList banners with type="首页轮播" %}
    {# 这里的代码会循环显示属于“首页轮播”分组的Banner图 #}
{% endbannerList %}

If your home page banner image is not set to a specific group, or if you want to call the banner image of the default group, you can omit ittypeparameters:

{% bannerList banners %}
    {# 这里的代码会循环显示默认分组的Banner图 #}
{% endbannerList %}

Here, bannersIt is a variable name we define, it will contain a list (array object) of Banner images. EachitemhasId/Logo/Link/DescriptionandAltFields such as these correspond to the various information you fill in on the backend.

4. Build the HTML structure and dynamic effects of the carousel.

It is not enough to call the Banner data, we also need to combine the HTML structure and front-end JavaScript to achieve dynamic carousel effects. Most front-end carousel libraries (such as Swiper, Slick Carousel, or Bootstrap Carousel) require a specific HTML structure, and usually require the first carousel item to have aactiveClass to represent the initial state.

We can cleverly utilize the AnQiCMS template language toforloop.CounterAutomatically add to the first Banner item.activeClass.

This is a general HTML structure example, it assumes that you will integrate a carousel library thatcarousel-itemandactiveneeds to be class-based:

`html

<div class="carousel-inner">
    {% bannerList banners with type="首页轮播" %}
        {% for item in banners %}
            <div class="carousel-item {% if forloop.Counter == 1 %}active{% endif %}">
                <a href="{{ item.Link }}" target="_blank" title="{{ item.Alt }}">
                    <img src="{{ item.Logo }}" alt="{{ item.Alt }}" class="img-fluid">
                    {% if item.Description %}
                        <div class="carousel-caption d-none d-md-block">
                            <p>{{ item.Description }}</p>