Hello,
Use this
Custom Home Message -
<div class="slider-wrapper bg-light my-0"><a href="image-link" class="slider-wrapper__img-wrapper" style="position: relative; display: inline;"><img src="image-url" alt="alt-text" class="slider-wrapper__img slider-cust-img" style="height: auto; width: 80vw;"><canvas height="0" width="0" style="border-radius: inherit; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;"></canvas></a></div>
Custom CSS -
`.slider-wrapper__img {
height: 12rem;
width: 12rem;
border-radius: 0.4rem;
margin-top: 6px;
margin-bottom: 6px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px 1px;
}
.slider {
width: 93%;
margin: auto;
overflow: hidden;
border-radius: 10px;
}
.slider ul {
display: flex;
padding: 0;
width: 400%;
animation: cambio 20s infinite alternate linear;
}
.slider li {
width: 100%;
list-style: none;
}
.slider img {
width: 100%;
border-radius: 10px;
}
@keyframes cambio {
0% {margin-left: 0;}
20% {margin-left: 0;}
25% {margin-left: -100%;}
45% {margin-left: -100%;}
50% {margin-left: -200%;}
70% {margin-left: -200%;}
75% {margin-left: -300%;}
100% {margin-left: -300%;}
}
h5.slider-title {
margin: 0px;
margin-top: 20px;
margin-bottom: 5px;
padding: 0;
padding-left: 20px;
font-size: 1.4rem;
color: #1F4848;
}
h5.slider-title span {
font-size: 0.8rem;
color: #B3C0C1;
float: right;
margin-right: 20px;
margin-top: 5px;
text-transform: uppercase;
}`
If you want to add more images... just duplicate code starting from <a> and place before </div> tag
renidev Here you go... If you need any help implementing it... I am here....
