Articles on: coreFORCE Advanced & Enterprise

coreFORCE - Website: Adding text banners to your site

coreFORCE Advanced and Enterprise Only

Navigate to Website > Templates > click Content Tab and Insert %module:fragment:TEXT_SLIDER% after the tag.

Set up your slider wrapper markup.

<body>
  <div id="error_message" class="error-message"></div>
    <div id="_wrapper" class="hidden">
     <header>
        %module:fragment:TEXT_SLIDER%
    ```

2. Once added, navigate to **Website** > **Fragments**. Create a new Fragment called “Text Slider”

![Fragments](https://storage.crisp.chat/users/helpdesk/website/6989aace46840400/u53cyp5ncynmjdosyixmpsbe2myq7v_1jrulqo.png)

3. Insert this content into the Fragment’s content.

```     
<style>
  .text-slider {
    background-color: #000000; /*Update this*/
    color: #ffffff; /*Update this*/
    padding: 5px;
    text-align: center;
  }

  .text-slider p {
    margin: 0;
  }
</style>

<div class="text-slider">
  <div class="text-item">
    <p>Update me</p> 
  </div>
  <div class="text-item">
    <p>You can delete me or add a new text slider</p>
  </div>
</div>

<script>
  $(function () {
    var $textSlider = $(".text-slider");
    $textSlider
      .slick({
        arrows: false,
        autoplaySpeed: 5000,
        autoplay: true,
        dots: false,
        infinite: true,
      })
      .on("setPosition", function () {
        if (!($(this).find('.slick-slide').length > 1)) {
          $(this).find(".slick-arrow").hide();
        }
      });
  })
</script>
             ```

4. Update the background and color in the  section to match your website’s theme. The text to be displayed should also be updated and if you want to add more.  Insert this element inside the class "text-slider":

```   
 <div class="text-item">
   <p>Update me</p> 
 </div>
    ```   

5. Click Save.

Updated on: 07/10/2024

Was this article helpful?

Thank you!