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 calledOWL 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 successfullyCreate 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 onContentin 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 theuniquename 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 StoreViewswill 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 foroneslideinsidethecontainerdiv.

<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 theitemclass. 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

  1Browse for your image

  2Click on the image that you wish to import

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

  4If 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 outname_of_pagewith 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 ofCSSthen 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