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 <header> 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 <style></style> 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!