How to dynamically display different group Banner carousel on the website homepage?

The home page banner slideshow is an important window that attracts visitors' attention and conveys core information.Through clever settings, we can make the homepage banner carousel dynamically display according to different marketing objectives or content themes, which can not only enhance user experience but also effectively guide users to browse.The AnQiCMS provides flexible functions to help users easily achieve this requirement.

Understanding the Banner mechanism of Anqi CMS

In AutoCMS, the management and display of banners have a clear logic.System supports grouping for Banners, which means you can create independent sets of Banner images for different purposes and themes.For example, you can create a group for the header carousel on the homepage, create another group for the promotional Banner in the sidebar, or set up a temporary group for a specific promotional event.

Manage these Banner groups and images is usually done in the security CMS backend management interface.Here, you can upload images, set the link address for each Banner, add Alt text to the images (which is crucial for improving the website's SEO performance and accessibility), as well as a brief description and title.The key is that you can create multiple different Banner groups in the background and add corresponding images to each group.

Implementation steps: Dynamically display different group's Banner carousel

To make these group banners dynamically display on the homepage of the website, we need to combine the backend settings and the invocation of the frontend template files.

Step 1: Set Banner Group and Image in the Security CMS backend

First, please log in to your security CMS backend.Although the specific menu path may vary by version or theme, you will usually find the "Banner Management" or "Slide Management" features under "Page Resources" or "Content Management."

Enter the Banner management interface and you will see the options to create or edit Banner groups. Here:

  1. Create a new Banner group:For example, you can create a group named "Home Featured" to display the most important promotional images on the website; and create a group named "New Arrivals" to scroll through the latest products on launch.The name of the group is the unique identifier you call it in the front-end template.
  2. Upload an image for each group:Select the Banner image you have prepared in your respective group. Each image must:
    • Image file:Choose high-quality images that are appropriately sized.
    • Link address (Link):Set the target page after clicking the Banner.
    • Alt text (Alt):Add descriptive text to the image to improve SEO and user experience.
    • Title and Description：Fill in as needed, this information can be displayed on the front end.
    • Note:Suggest that all Banner images within the same group maintain consistent dimensions to ensure coordinated and unified carousel effects.

第二步：In the homepage template of the website, call the specified group's Banner

After completing the background configuration, we need to modify the website's homepage template file next. The template files of Anqi CMS are usually stored in/templatedirectory, and the homepage file may beindex/index.htmlorindex.html.

安企CMS provided a special template tag for calling the Banner list.bannerListThrough this tag,typeParameters, we can specify which group's Banner to call.

The following is an example code snippet showing how to call different groups of Banners in different regions on the homepage:

{# 首页主要轮播区域 - 调用“首页主推”分组的Banner #}
<div class="main-carousel-section">
    <div class="swiper-wrapper"> {# 假设您使用了Swiperjs等轮播库 #}
        {% bannerList mainBanners with type="首页主推" %}
            {% for item in mainBanners %}
            <div class="swiper-slide">
                <a class="carousel-link {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
                    <img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Description}}" />
                    <div class="banner-content">
                        <h3>{{item.Title}}</h3>
                        <p>{{item.Description}}</p>
                    </div>
                </a>
            </div>
            {% endfor %}
        {% endbannerList %}
    </div>
    {# 添加Swiper的导航、分页等元素 #}
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

{# 首页侧边栏推广区域 - 调用“新品速递”分组的Banner #}
<div class="sidebar-promotion">
    <h3>新品速递</h3>
    <div class="product-banner-list">
        {% bannerList newArrivalsBanners with type="新品速递" %}
            {% for item in newArrivalsBanners %}
            <a class="product-promo-item" href="{{item.Link}}" target="_blank">
                <img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Description}}" />
                <h4>{{item.Title}}</h4>
            </a>
            {% endfor %}
        {% endbannerList %}
    </div>
</div>

Code analysis:

  • {% bannerList mainBanners with type="首页主推" %}This line of code tells the CMS to find the Banner group named "Home Main Push" and assign all the Banner data to it.mainBannersthis variable.
  • {% for item in mainBanners %}：This is a loop statement, which will iterate overmainBannerseach Banner data. In each loop iteration, the current Banner's data will be stored initemthe variable.
  • {{item.Link}}/{{item.Logo}}/{{item.Alt}}/{{item.Title}}/{{item.Description}}：These are the ones you can get fromitemThe Banner data retrieved from the variable corresponds to the links, image addresses, Alt text, title, and description set in the background.
  • {% if forloop.Counter == 1 %}active{% endif %}This is a commonly used technique to mark the first element as 'active' state in a carousel, so that the front-end CSS/JavaScript can initialize the carousel effect.forloop.CounterRepresents the current loop count, starting from 1.

Step 3: Style and Interaction (implemented through CSS/JavaScript)

It is not enough to simply call out images and links, you also need to write the corresponding CSS to beautify the layout and appearance of the Banner, as well as JavaScript code to implement the carousel animation effect, auto-play, switch buttons, and page navigator for interactive functions.This work usually depends on the front-end carousel library (such as Swiper.js, Owl Carousel, etc.) or custom script.

Optimization Suggestions

  • Image Optimization:When uploading Banner images on the backend, be sure to pay attention to the image size and file size.Images that are too large can significantly affect the website's loading speed.The "Content Settings" in AnQi CMS provides features such as automatic image compression and conversion to WebP format, it is recommended to make full use of them.
  • Responsive design:For different screen sizes (PC, tablet, mobile), different Banner layouts or images may be required.You can set media queries in CSS to adjust the display of the Banner, and even consider uploading different Banner images for different device sizes in the background (if the system supports it, or by creating different Banner groups, and calling them in the front-end according to the device type).
  • SEO-friendly:Ensure that each Banner image is filled with meaningful contentaltText. This not only helps search engines understand the image content, but also provides information to users when the image fails to load.

By following the above steps, you can easily implement dynamic display of different group Banners on the homepage of the website built with Anqi CMS, thereby better serving your website operation goals.

Common Questions (FAQ)

1. Can I display multiple Banner carousels on the same page, each showing different grouped content?

Yes, it is completely possible. Just as the example in the article shows, you just need to use the template multiple timesbannerListtags,