This is the slider plugin we want to install We want to install the slider plugin on this website. We want the slider to appear in place of this header image. We’ve already downloaded the product package from Roomy Themes. We have to unzip it in order to access actual plugin files. The plugin comes with detailed documentation on how to install and build contents. We’ll follow instructions on this page to install the plugin First, we need to locate and identify these folders and files We want to install the full width of standard version. We’ll now log into our weebly website editor The next step is to prepare the header type we want to install the plugin on. I can install the slider on any of these header types Because I don’t want the slider to appear on every page, I will create another header type specifically for the slider To do this, I will select and copy the entire contents of “no-header” layout Then I will create a new header type and name it “slider-5” because I want to install 5 slides I will now paste the code I copied earlier Within the layout we just created, we’ll now find a position we want to install the slider Do we want the slider to appear above or below main content section? We recommend backing up your theme before installation We have to insert library files into “slider 5” header type that we created earlier We’ll now upload plugin files which includes images and script. Upload images from slide 1 to slide 6. Wait for all images to upload. Next, we’ll upload plugin script. We’ll now copy and paste plugin HTML code. We must first decide what version of the plugin we want to install and the number of slides we want to show. Once you’ve decided on the version and number of slides, open the version’s folder, open the text file, select and copy the entire contents of that text file. We don’t want to show actual plugin code in this video, therefore, we’ll be using a dummy code in place of actual code. We’ll paste actual code within the background and we expect you to use actual code. Next, we’ll copy and paste CSS file. Depending on the weebly theme you are using, you can paste the CSS code on main_style.css, or on main.less code editor. This weebly theme uses LESS CSS, which means I can paste the code I just copied on “main.less”. In some weebly themes, you’ll see main_style.css instead. As shown, it would be much easier to simply copy and paste the CSS code on main.less. But because I want to keep the code clean and easy to access, I’m going to create a file specifically for the plugin CSS. Before I proceed, it’s important to point out that this step is not compulsory, but you’ll find it more useful having the plugin code on a separate file editor. It’s also important to point out that this step will only work on weebly themes that uses LESS CSS. If your weebly theme has main_style.css, paste the code there and skip to the next step. We’re now going to create a new style (file) and paste our plugin styles there. We now have a separate space for our plugin style. Although the file has been created, our weebly theme will not read or recognize it unless we include it to the main style. What we are going to do next is to simply inform main.less that we have created a new file. Installation is completed. We’ll now save our work so that we can look at the slider. We cannot see the slider because we have not yet pointed slider header type to this page. Of course, it’s important to point out that on weebly website editor, the slides are going to appear as list, one on top of the other. The slider will work as expected on your live (published) website. Let’s quickly add some contents to each slide. We’ll just drag and drop content elements on each slide. We’ll add contents to all slides and then publish the website to have a look. Here’s the slider working as expected. Comparing the before (with header image) and the after (with slider). We’ll replace current slide images with our preferred images. To do this, we’ll simply rename our images to the same name as current slide images and upload them. Once uploaded, the new images will replace current images. The new images have replaced old ones. We’ll now publish the website again and have another look. We have successfully installed the slider plugin. Follow instructions within plugin documentation to change slider speed, transition effect and other properties.