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.


NOTE: You will need a basic understanding of HTML and CSS markup to develop your slider.
NOTE: If you are using the CPCommerce Slideshow Mod please go here: CP-Commerce Slideshow


Step-by-step guide


This guide will walk you through each step needed to successfully Create a New SlideshowAdd 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

19006039.png


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


19006040.png


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

  • DO NOT CHANGE THIS. BY CHANGING THIS YOU WILL HAVE TO UPDATE THE REFERENCE IN YOUR LAYOUT FILE


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.

19006042.png



CREATING THE STRUCTURE FOR A SLIDESHOW

  1.  Let's start by creating the base HTML structure.
Base Structure
<div class="container"></div>

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

Slider Setup For One Slide
    <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:


New Slide Syntax
<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.

19006050.png

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

19006046.png


    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.


19006048.png



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.

Adding a Link
    <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.

  • This is for more advanced editing, you do not need to change or edit anything in this file, but ensure that it is included before the ending <div> tag.
OWL Carousel
  <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

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>

19006056.png


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.

  • NOTE: CSS can alter the layout and format of your entire site. It is highly recommended that you only use custom CSS if you have a working knowledge of CSS.
CSS Style
<style type="text/css">

     .exampleClass {

         ... style selectors ...

     }

</style>