How to Add Accordion Slider in Free Weebly Site?

Weebly offers a traditional slideshow element to add sliders to your site which is nowhere nearer to modern slideshows offered by third party providers or plugins. Below is one of the stylish slider customized to use on a Weebly site. This is an accordion style slider made with CSS and can be easily added to your free Weebly site without the need of upgrading to pro account.

View Demo

How to Add Accordion Slider in Free Weebly Site?

Now that you have seen the slider and if you are interested, here is the step by step instruction on adding the slider on your site. The process consist of three simple steps:

• Uploading images for slider
• Adding CSS code on a page or site level
• Adding HTML code using embed code element

Step 1 – Uploading Images for Accordion Slider

Prepare all your images with the required size. In this example we used images with width = 640 px. Upload all the images on your site under “Theme > Edit HTML / CSS > Assets > Upload File(s)…” and get the URLs which needs to be used in step 3. The URL of an uploaded image will be like:

http://your-site-name.com/files/theme/image-name.jpg

Step 2 – Adding CSS Code

If you want to add the slider only on particular pages then add the below CSS code under “Pages > Choose the page > SEO Settings > Header Code” section of the required pages. In case if you want to add the slider on multiple pages then we would recommend adding it in the main CSS under “Theme > Edit HTML / CSS > Style > main.less”. You can also add the code under “Settings > SEO > Header Code” section.

<style type="text/css">
.accordion_slider {
width: 805px; height: 320px;
overflow: hidden;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordion_slider ul {
width: 2000px;
}
.accordion_slider li {
position: relative;
display: block;
width: 160px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordion_slider ul:hover li {width: 40px;}
.accordion_slider ul li:hover {width: 640px;}
.accordion_slider li img {
display: block;
max-width: 640px !important;
}
.image_box {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0; 
width: 640px; 
}
.image_box a {
display: block;
color: #fff !important;
text-decoration: none;
text-align: left;
padding: 20px;
font-size: 16px;
}
</style>

You can customize any of the styles as per your need.

Step 3 – Adding HTML Code

The last step is to add the below HTML code of the slider by dragging and dropping an embed code element on the content area of a required page. Don’t forget to replace the image links with your own links from step 1.

<div class="accordion_slider">
<ul>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-1.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-2.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-3.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-4.jpg"/>
</li>
<li>
<div class="image_box">
<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a>
</div>
<img src="https://img.webnots.com/2015/07/Image-5.jpg"/>
</li>
</ul>
</div>