Phantom allows you display the types of services you plan to offer in a carousel that scrolls horizontally as the user clicks the previous or next arrow icons.

Adding a New Carousel Item

You can add a new service to the carousel by following these instructions:

1. Open the index.html file in your code editor.
2. Search for the following id: services
3. Copy and paste a new service item directly below the last service item.
4. Add your custom image, text, and details to the new service item.
5. Save the index.html file and view the changes in your web browser.

Here is a new carousel item (service item 6) after it was inserted into the HTML code:

<!-- Service Item 5 -->
<li class="service-item">
    <img src="include/images/service-5.jpg">
    <h3 class="uppercase medium-small semibold text-white">Branding</h3>
    <hr>
    <p class="small text-light">Introduction text</p>
    <ul class="text-light small">
        <li>Service detail</li>
        <li>Service detail</li>
    </ul>
    <p>
        <a href="#contact" class="button outline smoothscroll color">Get a Quote 
            <i class="fa fa-envelope"></i>
        </a>
    </p>
</li>

<!-- Service Item 6 -->
<li class="service-item">
    <img src="include/images/service-6.jpg">
    <h3 class="uppercase medium-small semibold text-white">Branding</h3>
    <hr>
    <p class=small text-light">Introduction text</p>
    <ul class="text-light small">
        <li>Service detail</li>
        <li>Service detail</li>
    </ul>
    <p>
        <a href="#contact" class="button outline smoothscroll color">Get a Quote 
            <i class="fa fa-envelope"></i>
        </a>
    </p>
</li>

Enabling/Disabling the Carousel Animation

Phantom allows you to enable/disable the carousel animation for the services slider. By default, the animation is disabled in Phantom, but enabling it is a simple process by following these instructions:

1. Open the services-slider.js file in your code editor.
2. Search for the following function: $(‘#services-slider’).carouFredSel
3. Search for the auto: false boolean variable. If you want to disable the animation after enabling it, search for auto: true instead.
4. Change false to true if you want to enable the animation. To disable the animation, change true to false.
5. Save the services-slider.js file and view the changes in your web browser.