I was looking forward to build a Klip where I can have a slide show of the images. Do any one have any idea how to do it?
I am guessing I can use HTML component. Does any one has any examples that they have built?
Date
Votes
2 comments
-
You can add the images URLs in the array to the HTML component series.
And use below sample to code to rotate your images in series1.
<head>
<meta charset="UTF-8">
<title>Responsive CSS Image Slider</title>
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slidy infinite;
}
</style>
</head>
<body>
<div id="slider">
<figure>
{{each data}}
<img src="${$value.Series1}" alt="">
{{/each}}
</figure>
</div> -
Thank you Shonali Chandak for the klip.
How can we use the klip for rotating text the same way?
Adding the "texts" in the array to the HTML component series.
Please sign in to leave a comment.