How to implement the Banner image carousel effect in Anqi CMS template?

As an experienced website operations expert, I am happy to provide you with a detailed explanation of how to implement the Banner image slideshow effect in AnQiCMS templates.AnQi CMS, with its flexible template mechanism and powerful content management capabilities, provides an excellent foundation for us to implement such functions.

Implementing a Banner Image Carousel Effect in AnQiCMS Template: A Practical Guide

In today's web design, the Banner image carousel is almost a standard feature for every corporate website and portal.It can effectively attract visitors' attention and can also display multiple important products, services, or brand information in limited space.AnQi CMS with its simple and efficient architecture and support for Django template engine syntax, allows website operators to easily integrate and manage Banner carousel effects in templates.

This article will focus on Anqi CMS, from backend preparation to template integration, to front-end interaction implementation, and provide you with a comprehensive practical guide.

One, prepare the background: build your Banner content library

Before starting the template code, we first need to configure the images and relevant information required for the carousel in the Anqi CMS backend management system. Anqi CMS provides various ways to manage banners, allowing you to choose flexibly according to your actual needs:

1. Home Page Banner Management:AnQi CMS usually comes with a built-in Banner management feature for the website homepage. Here, you can upload multiple images, set titles, descriptions, redirect links, and importantAltText (used as alternative text when images cannot be displayed, also very important for SEO). These images are usually assigned to a default Banner group.

2. Category or Single Page Banner Configuration:In addition to the global homepage Banner, AnqiCMS also supports setting exclusive Banner carousels for specific category pages or independent single pages.

   • Category Banner:In the background, go to "Content Management" -> "Document Category" to edit a category, you will find a "Banner Image" setting item (refer tohelp-content-category.md）。You can upload a set of Banner images for this category here.
   • Single page Banner：Similarly, when editing a single page under "Page Resources" -> "Page Management", there is also an option for the "Banner Image" (refer tohelp-source-page.md)

Key Tips:No matter which Banner, in order to ensure the coordination and beauty of the carousel effect, be sure to ensure that the size of the uploaded images remains consistent. At the same time, fill in clear and accurate information for each image.AltThis not only improves the accessibility of the website, but also greatly benefits search engine optimization.

Second, template integration: use AnQiCMS tags to obtain data.

Once the background Banner image and information are ready, the next step is to call these data in the front-end template and construct the HTML structure. AnqiCMS template tagsbannerListIt is a powerful tool for realizing this core function.

1. Determine the location of the template file: Usually, the Banner carousel is placed on the homepage of the website (index/index.htmlorindex.html), category list page ({模型table}/list.html) or single page detail page (page/detail.html) Edit the template file according to the position where you want to display the Banner. The template files of AnQi CMS are located by default in/templatethe directory, and.htmlsuffix (refer todesign-convention.md)

2. IntroductionbannerListTags: bannerListThe tag is used to get the Banner list configured in the background. It is a loop tag, and you can traverse each Banner item inside it as you would an array.

   {% bannerList banners %}
       {# 在这里循环输出每个 Banner item #}
   {% endbannerList %}
   

   bannersIs the variable name you define for the Banner list, you can name it freely, but it must be consistent with the internalforvariable in the loop.

3. Build the basic HTML structure:InbannerListWe use within the tag.forLoop through each Banner image. Each Banner item (item) includesLogo(Image address),Link(Link address),Alt(Image Alt text),Title(Title) andDescription(description) etc. fields (referencetag-/anqiapi-other/3498.html)

   A basic Banner carousel HTML structure may look like this, please noteitem.Titleanditem.DescriptionThe fields will be displayed according to the backend settings:

   <div class="main-banner-carousel">
       <div class="swiper-wrapper"> {# 假设使用 Swiper.js 轮播库 #}
           {% bannerList banners %}
               {% for item in banners %}
               <div class="swiper-slide">
                   <a href="{{item.Link}}" {% if item.Link %}target="_blank"{% endif %}>
                       <img src="{{item.Logo}}" alt="{{item.Alt}}" class="img-fluid">
                       {% if item.Title %}
                       <div class="banner-caption">
                           <h3>{{item.Title}}</h3>
                           {% if item.Description %}<p>{{item.Description}}</p>{% endif %}
                       </div>
                       {% endif %}
                   </a>
               </div>
               {% endfor %}
           {% endbannerList %}
       </div>
       {# 如果需要，这里可以添加轮播控制按钮和分页器 #}
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
       <div class="swiper-pagination"></div>
   </div>
   

4. Implement front-end interaction withactiveStatus:The AnqiCMS is responsible for providing content data, and the actual carousel animation effect needs to rely on the front-end CSS and JavaScript to implement.Generally, we would introduce a mature front-end carousel library, such as Swiper.js, Slick Carousel, or Owl Carousel, etc.

   These libraries usually need to add a class to the first Banner elementactiveto initialize. Anqi CMS template.forloop.CounterVariables can help us easily achieve this:

   `twig

   <div class="swiper-wrapper">
       {% bannerList banners %}
           {% for item in banners %}
           <div class="swiper-slide {% if forloop.Counter == 1 %}swiper-slide-active{% endif %}"> {# 注意：类名可能因轮播库而异 #}
               <a href="{{item.Link}}" {% if item.Link %}target="_blank"{% endif %}>
                   <img src="{{item.Logo}}" alt="{{item.Alt}}" class="img-fluid">
                   {% if item.Title %}
                   <div class="banner-caption">
                       <h3>{{item.Title}}</h3>
                       {% if item.Description %}<p>{{item.Description}}</p>{% endif %}
                   </div>
                   {% endif %}
               </a>
           </div>
           {% endfor %}
       {% endbannerList %}
   </div>
   <div class="swiper-button-next"></div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-pagination"></div>
   

   {# Introduce the CSS and JS files of the carousel library and initialize the carousel #} <