CP-Commerce

    This article covers the basics of adding and modifying the slide contents on your homepage. Please note that this tutorial only applies to Porto Themes actively installed. Your slider(s) on the homepage is powered by a JQuery plugin called OWL Carousel. Be sure to follow each step in this tutorial to achieve the best results.

Step-by-step guide

This guide will walk you through each step needed to successfully Create a New Slideshow, Add Slides to your Slider, & Modify existing slides.

Editing Your Slideshow

Start by logging into the admin back-end of your site.

1. Click on Content in the left menu
2. Click on Elements > Blocks

3. Locate your static block in the list. Click Select > Edit

4. Once you open the editor for your block, you'll need to verify the information.

1. Block Title - This is the name of your block. Make this something that you can easily identify

2. Identifier - This is the unique name for this slider. This value must be unique as you will will reference this in your layout

3. Store View - If you have more than one store view then you would select which store this slider will be available. By default, All Store Views will show your slider on every view.

4. WYSIWYG Editor - This is where you will create the HTML markup for your slideshow.

CREATING THE STRUCTURE FOR A SLIDESHOW

1.  Let's start by creating the base HTML structure.

<div class="container"></div>

2. Now we'll add the base structure for one slide inside the container div.

    <div id="banner-slider-demo-8" class="owl-carousel owl-middle-narrow owl-banner-carousel">

  <div class="item" style="background:#f0f0f0;position:relative;">

    This is text on your slide

    <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide01n.jpg"}}" alt="" />

  </div>

</div>

UNDERSTANDING THE HTML MARKUP:

In order for the OWL Carousel (Slideshow) to work you must ensure that the code is structured a specific way.

Each slide is contained within the item class. To add more slides, simply add another:

<div class="item"></div>

You can add text, images, and other HTML/JS elements in between the opening and closing div tags

1. Container: This encapsulates the slider and all its contents
2. Owl-Carousel: This is the inner container that contains all your slides
3. Item: This is the container for each slide inside the slideshow. To create more slides, copy and past this section
4. Text: Here you can add any HTML elements such as text, buttons, images
5. Images: This is the markup for an image.

TO ADD OR REPLACE AN IMAGE:

1.  Remove the <img> tag

   Image

           <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide01n.jpg"}}" alt="" />

2. Click on Insert Image

    1 Browse for your image

    2 Click on the image that you wish to import

    3 Click Insert File to add the HTML markup to the editor

    4 If you already uploaded an image, you can navigate to it using the directory tree on the left side.

ADDING LINKS TO YOUR SLIDES

In most cases, you will need each slide to link to a specific location/page on your site. In order to do this you would simply add an <a> tag around the <img> tag.

View lines 4-6. Change out name_of_page with the name of the page you are navigating to.

    <div id="banner-slider-demo-8" class="owl-carousel owl-middle-narrow owl-banner-carousel">

  <div class="item" style="background:#f0f0f0;position:relative;">

    This is text on your slide

    <a href="{{store url="name_of_page"}}">    

         <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide01n.jpg"}}" alt="" />

    </a>

  </div>

</div>

ADDING FUNCTIONALITY TO YOUR SLIDER

In order for your slider to operate correctly you will need to add the JavaScript section to the bottom of your block.

  <script type="text/javascript">

    require([

      'jquery',

      'owl.carousel/owl.carousel.min'

    ], function ($) {

      var owl_8 = $("#banner-slider-demo-8").owlCarousel({

        items: 1,

        autoplay: true,

        autoplayTimeout: 5000,

        autoplayHoverPause: true,

        dots: false,

        navRewind: true,

        animateIn: 'fadeIn',

        animateOut: 'fadeOut',

        loop: true,

        nav: true,

        navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]

      });

    });

  </script>

WRAPPING UP.

Now that we have touched base on the different aspects of the slider, let's take a look at the final result

<div class="container">

  <div id="banner-slider-demo-8" class="owl-carousel owl-middle-narrow owl-banner-carousel">

    <div class="item" style="background:#f0f0f0;position:relative;">

      This is text on your slide

      <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide01n.jpg"}}" alt="" />

    </div>

    <div class="item" style="background:#f0f0f0;position:relative;">

      This is text on your slide

      <img src="{{media url="wysiwyg/smartwave/porto/homepage/08/slider/slide02n.jpg"}}" alt="" />

    </div>

  </div>

  <script type="text/javascript">

    require([

      'jquery',

      'owl.carousel/owl.carousel.min'

    ], function ($) {

      var owl_8 = $("#banner-slider-demo-8").owlCarousel({

        items: 1,

        autoplay: true,

        autoplayTimeout: 5000,

        autoplayHoverPause: true,

        dots: false,

        navRewind: true,

        animateIn: 'fadeIn',

        animateOut: 'fadeOut',

        loop: true,

        nav: true,

        navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]

      });

    });

  </script>

</div>

ADDING CSS (STYLING) TO YOUR SLIDER

If you have an understanding of CSS then you can add some more functionality and styling to your slider.

To add custom CSS, simply put a <style> tag at the top of your code.

<style type="text/css">

     .exampleClass {

         ... style selectors ...

     }

</style>

• Magento 2: How to Add Scripts to Your Website