- Joined
- Sep 1, 2023
- Messages
- 7
- Points
- 3
Hello. Today I want to teach you how to make an animated slider for your lovely forum or website.
Lets go...!
1) GO to [ Appearance > widgets ] and create a HTML widget.
2) Enter a desired name for widget key and choose [ Forum list: Below nodes ] in Display in positions section or every position you want.
3) Type <xf:include template="logo_slider_1" /> in the template field.
4) Go to [ Appearance > templates ] and add a new template in top right side of your screen.
5) Type logo_slider_1 as the template name and add this code to inside of template.
6) Go to extra.less and add this code to inside.
7) Repeat step 1,2,3 again and change the <xf:include template="logo_slider_1" /> to <xf:include template="logo_slider_2" /> in template field.
8) Repeat step 4,5 again and change the logo_slider_1 name to logo_slider_2 AND change both <div class="logo_items_right"> to <div class="logo_items_left">
9) you can change "/static/5.png" to any image link that you want.
10) leave your like and comments.
Lets go...!
1) GO to [ Appearance > widgets ] and create a HTML widget.
2) Enter a desired name for widget key and choose [ Forum list: Below nodes ] in Display in positions section or every position you want.
3) Type <xf:include template="logo_slider_1" /> in the template field.
4) Go to [ Appearance > templates ] and add a new template in top right side of your screen.
5) Type logo_slider_1 as the template name and add this code to inside of template.
HTML:
<div class="logos">
<div class="logo_items_right">
<a href=""><img alt="item1" src="/static/1.png"></a>
<a href=""><img alt="item2" src="/static/2.png"></a>
<a href=""><img alt="item3" src="/static/3.png"></a>
<a href=""><img alt="item4" src="/static/4.png"></a>
<a href=""><img alt="item5" src="/static/5.png"></a>
<a href=""><img alt="item6" src="/static/6.png"></a>
<a href=""><img alt="item7" src="/static/7.png"></a>
</div>
<div class="logo_items_right">
<a href=""><img alt="item1" src="/static/1.png"></a>
<a href=""><img alt="item2" src="/static/2.png"></a>
<a href=""><img alt="item3" src="/static/3.png"></a>
<a href=""><img alt="item4" src="/static/4.png"></a>
<a href=""><img alt="item5" src="/static/5.png"></a>
<a href=""><img alt="item6" src="/static/6.png"></a>
<a href=""><img alt="item7" src="/static/7.png"></a>
</div>
</div>
CSS:
@keyframes slides-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes slides-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
.logos {
overflow: hidden;
padding: 10px 0px;
white-space: nowrap;
position: relative;
}
.logo_items_left {
display: inline-block;
animation: 35s slides-left infinite linear;
}
.logo_items_right {
display: inline-block;
animation: 35s slides-right infinite linear;
}
.logos:hover .logo_items {
animation-play-state: paused;
}
.logo_items_left img {
height: 100px;
margin: 5px;
}
.logo_items_right img {
height: 100px;
margin: 5px;
}8) Repeat step 4,5 again and change the logo_slider_1 name to logo_slider_2 AND change both <div class="logo_items_right"> to <div class="logo_items_left">
9) you can change "/static/5.png" to any image link that you want.
10) leave your like and comments.
