1

Rotating the images in a Klip.

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?

2 comments

  • 0
    Avatar
    The Data Girl

    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>

  • 0
    Avatar
    Delightrics Innowex

    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.