Weebly offers simple slideshow element for inserting sliders on your site. Feature rich slideshow with multiple transition effects is one of the missing part in Weebly. Long back Weebly was offering header slideshow for Pro users which was also removed from all responsive themes. We have tested various sliders and found the popular Nivo slider with modifications will be the best for Weebly users. Nivo slider is one of the well known slider on the web used on various themes by default. You can easily add beautiful transition effects with jQuery and customize the sliders according to your need. In this article we will discuss how to add free Nivo slider widget in your Weebly site. The slider can be inserted anywhere on your Weebly site with the restriction of one slider per page.
Nivo Slider Widget Features
Below are some of the highlights of free Nivo slider widget for Weebly:
- It can be added as a header slideshow or inside content area. In this article we will discuss about inserting insider content area, if you are looking for header slideshow then check out our separate article on how to insert header slideshow in free Weebly site.
- Nivo slider is offered with 4 different theme styles – light, bar, dark and default.
- You can add 12 different transition effects – slice down right, slide down left, slice up right, slice up left, slice up down, slice up down left, fold, fade, random box, rain box, rain box reverse and rain box grow reverse.
- Different transition effect can be added to each single slide.
- Easy to add text caption and caption with link. You can also link slider images to the required page on your site.
- Use simple controls like navigation buttons for previous and next slides.
How to Add Nivo Slider Widget in Weebly Site?
The demo slider has four images and uses transition effect defined for each image separately in HTML code. The second image (up.jpg) is used as a link to connect to a webpage with a caption text in the bottom. The fourth image (nemo.jpg) has a caption with HTML link.
Step 1 – Prepare Images
The first step for any slideshow is to prepare the images. In the demos we have used 4 images with each of size 618 x 246 px. We recommend to use similar ratio with higher size images for better quality.
Step 2 – Download Slider Files
Click on the below button to download all the required files for Nivo slider, this includes four images used for demo purpose.
Download all nivo slider files.
The zip archive file contains 12 files like below:
Navigational Images
- arrows_bar_default.png
- arrows_dark_light.png
- bullets_bar_default.png
- bullets_dark_light.png
- loading.gif
Scripts:
- jquery.nivo.slider.nod.js
- jquery-1.7.1.min.js
Stylesheet:
- theme-styles.css
Demo Images:
- toystory.jpg
- up.jpg
- walle.jpg
- nemo.jpg
You can delete the demo images and use your own on your Weebly site.
Step 3 – Upload Slider Files
Login to your Weebly account and edit the site you want to add Nivo slider. Navigate to “Theme > Edit HTML /CSS” and go to “Assets” section. Click on the + button and then create a new folder.
In this example, we create a folder named “nivo” and upload all the 12 files downloaded in step 2.
Step 4 – Inserting Code in Page
Now go to the page in which you want to add Nivo slider and insert the following code using “Embed Code” element.
<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>
Publish your site to see the beautiful Nivo slider.
Though the above code can be inserted using “Embed Code” element, it is recommended to add the CSS link under “Pages > Your Page > SEO Settings > Header Code” section.
<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />
And the JavaScript under”Pages > Your Page > SEO Settings > Footer Code” section.
<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>
Remember to replace the image URLs with your own.
Customizing Nivo Slider
Transition Effect for Images
The transition effect is controlled by using “data-transition” parameter for each image. Random effects will be used when you remove “data-transition” parameter from HTML code. For example, below HTML code will result in random transition effect with dark theme.
<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>
You can use one of the following 12 data transition parameter values for each image on the sliders to have different effects:
- sliceDownRight
- sliceDownLeft
- sliceUpRight
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Using Different Theme
The theme for the slider is defined using the CSS class “theme-NAME”. In the above example, bar theme was used as “theme-bar”. You can use one of the 4 themes by replacing the theme name like below:
<div class="slider-wrapper theme-bar"> – This is for bar theme
<div class="slider-wrapper theme-default"> -This is for default theme
<div class="slider-wrapper theme-light"> -This is for light theme
<div class="slider-wrapper theme-dark"> -This is for dark themeCustomizing Styles
All styles used for the slider are defined in “theme-styles.css” file. It has style sets for four themes and the slider wrapper. You can adjust the width, font size and color for captions in that file.
Customizing Script
Basically two scripts are used in this slider – one is Google jQuery library and other is the custom Nivo slider script distributed under MIT license. All the basic variables for the slider control are defined in “jquery.nivo.slider.nod.js” file as below under “//Default settings” section:
- effect: ‘random’ – By default random transition effects will be applied
- slices: 15 – Image is sliced into 15 pieces
- boxCols: 8 – Image is split into 8 columns
- boxRows: 4 – Image is split into 4 rows
- animSpeed: 500 – Animation speed is default 500 ms, reduce to move the transition faster
- pauseTime: 3000 – Pause time between slides in 3000 ms
- startSlide: 0 – Starting slide is the first (0) slide
- directionNav: true – Show direction navigation buttons (false to hide)
- controlNav: true – Show control navigation bullets (false to hide)
- controlNavThumbs: false – Hide navigation thumbnails instead of bullets (true to show)
- pauseOnHover: true – Pause the slideshow when mouse is hovered on the image
- manualAdvance: false – By default auto rotation enabled, you can enable manual moving of images
- prevText: ‘Prev’ – Previous image text
- nextText: ‘Next’ – Next image text
- randomStart: false – Random start is disabled
Note: Please do not remove the copyright comments from the “jquery.nivo.slider.nod.js” file. We understand the original developer “Dev7Studios” is no more existing and the site is redirecting to a WordPress plugin. But keep the notice intact for reference. As $ function is no more supported in Weebly, we have replaced all $ in the script with jQuery.
1 Comment
Leave your reply.