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.

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.

Related:  8 Reasons to Promote Your Blog with Instagram

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>

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.

Recommended Articles:

5 thoughts on “How to Add Accordion Slider in Free Weebly Site?”

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

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

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

    Reply

Leave a Comment