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

1	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>

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

<ul>

<li>

<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a>

</div>

</li>

<li>

<a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

After adding HTML code, you may see the images are listed down one below the other inside Weebly editor. This is fine because the CSS effects are not applied within the page, publish the page to see the actual slider.

Amanjot Kaur

· Reply

November 22, 2018 at 1:42 PM

what should i write here instead of your link
Up

xRatel

November 29, 2015 at 2:35 AM

For some reason this EXACT code doesn’t work for me, the images appear one below the other after i publish it

Thuxanh

July 11, 2015 at 11:24 PM

Hello,

Thanks for your tutorial. I do exactly the same but the banner slide cannot be centered? Could you please help me? Thank you in advance.

Editorial Staff
· Reply

Author
July 12, 2015 at 3:54 AM
The content inside embed code element can be aligned with default Weebly option by clicking inside the element and choose center alignment. If that does not work then use spacer in right/left to place the slider center.
You can also use align=”center” or style=”text-align:center” within DIV tag to align the content center.

Victoria Michaels

July 4, 2015 at 1:13 AM

It looks wonderful on my site. Thanks for the article though i was required to adjust the code for my site a bit.

How to Add Accordion Slider in Free Weebly Site?