# Creating a Sweet Content Slider

**URL:** <https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067>\
**Category:** programming\
**Created:** [November 21, 2014, 4:01am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067 "2014-11-21T04:01:57Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 27, 2017, 4:08pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/21 "2017-03-27T16:08:54Z")

</div>

This article can help you out a bit: [https://www.kirupa.com/html5/custom\_data\_attributes.htm](https://www.kirupa.com/html5/custom_data_attributes.htm)

🙂

---

<div class="post-metadata">

**Author:** ![rayb](https://avatars.discourse-cdn.com/v4/letter/r/c77e96/32.png) [@rayb](https://forum.kirupa.com/u/rayb)\
**Post date:** [March 28, 2017, 8:30am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/22 "2017-03-28T08:30:40Z")

</div>

Brilliant. Thank you.

---

<div class="post-metadata">

**Author:** ![Kate\_Koenig](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kate_koenig/32/8726_2.png) [@Kate\_Koenig](https://forum.kirupa.com/u/Kate_Koenig)\
**Post date:** [October 7, 2017, 12:50am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/23 "2017-10-07T00:50:13Z")

</div>

Hi Kirupa, thanks so much for the great tutorial.

I’m trying to get it to work for multiple sliders on one page, but am having a lot of difficulty making it work. I have three sliders, so I made three copies of the script, and named the variables, data-pos, and ids different for each one, corresponding to the three different sliders, and still can’t get it to work.

Any tips?

Thanks!

---

<div class="post-metadata">

**Author:** ![Jonny\_Silva](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jonny_silva/32/7836_2.png) [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)\
**Post date:** [October 7, 2017, 3:33pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/24 "2017-10-07T15:33:22Z")

</div>

Using [Animate.css](https://daneden.github.io/animate.css/) I did something like that, although it’s been a long time and I dont remember the details. But basically, you woldn’t even need to put the images side by side, you would do something like this inide the wraper:

```
`.img{
     position: absolute;
     top: 0;
     left: 0;
     display: none;
 }`

```

So all you would have to do is to change the display of the image and Animate.css would animate the image as its display property changes.

[Previous page](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067.md?page=1)