# 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:** 20\
**Page:** 1

<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:** [November 21, 2014, 4:01am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/1 "2014-11-21T04:01:59Z")

</div>

Learn how to create a content slider from scratch using a dash of the usual suspects (HTML, CSS, JavaScript) and a sweet CSS Transition.

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/creating\_a\_sweet\_content\_slider.htm](http://www.kirupa.com/html5/creating_a_sweet_content_slider.htm)

---

<div class="post-metadata">

**Author:** ![Afrila\_Gunadi](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@Afrila\_Gunadi](https://forum.kirupa.com/u/Afrila_Gunadi)\
**Post date:** [November 27, 2014, 9:54am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/2 "2014-11-27T09:54:18Z")

</div>

hi kirupa, i’m early for javascript. so this article very awesome.

this work to me, but i got some case.  
i create jquery animate, when i change width image 960px be 1130px. when the slider with 1130px in cutting process, slide image so messy.

i got the problem, because \< li class=“itemLinks” data-pos=“0” \> \</ li\> \< li class=“itemLinks” data-pos="-960px" \>\< /li \> , data-post still “960px”. can you help me? how data-pos change be 1130px in the proses jquery animate?  
thx in advance, regards 🙂

---

<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:** [November 28, 2014, 6:38am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/3 "2014-11-28T06:38:44Z")

</div>

Unfortunately, I don’t know much about how jquery animate works to help you out ☹

When you say “messy”, what do you mean? Is the animation really choppy? If so, I am guessing the CSS transition on the page is interfering with jQuery Animate’s approach for moving things.

---

<div class="post-metadata">

**Author:** ![Afrila\_Gunadi](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@Afrila\_Gunadi](https://forum.kirupa.com/u/Afrila_Gunadi)\
**Post date:** [December 1, 2014, 3:31am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/4 "2014-12-01T03:31:20Z")

</div>

thank’s for reply,

so, i have web html just two column ( column left for menu, column right for slide). when column menu be smaller ( width ), so automatically column slider be enlarged…

not messy = dirty, i mean when column slider be enlarged and the shift of slide2, slide3 shown partially. because data-pos="-960px" can’t be changed to -1130px for slide2. so slide3 shown partially

yeah, animation really really choppy…

---

<div class="post-metadata">

**Author:** ![Prax\_Saxena](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Prax\_Saxena](https://forum.kirupa.com/u/Prax_Saxena)\
**Post date:** [January 14, 2015, 8:48am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/5 "2015-01-14T08:48:22Z")

</div>

This was the code that I typed, but it doesn’t seem to be right.

```
    <!DOCTYPE html>
    <html>

    <head>

    <style>
    #wrapper {
    width: 2200px;
    transform: translate3d(0, 0, 0);
     transition: transform .5s ease-in-out;
}

    .content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}
    #contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
    #itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
    #itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
    #itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
    #itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}
    #navLinks {
    text-align: center;
    width: 550px;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 5px;
            border-radius: 50%;
            border: black 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }

    </style>
    </head>

    <body>
    <div id="contentContainer">
	    <div id="wrapper">
	    <div id="itemOne" class="content">
 
	    </div>
	    <div id="itemTwo" class="content">
 
	    </div>
	    <div id="itemThree" class="content">
 
	    </div>
	    <div id="itemFour" class="content">
 
	    </div>
	</div>
    </div>
    <div id="navLinks">
        <ul>
            <li class="itemLinks" data-pos="0px"></li>
            < li class="itemLinks" data-pos="-550px"></li>
            <li class="itemLinks" data-pos="-1100px"></li>
            <li class="itemLinks" data-pos="-1650px"></li>
        </ul>
    </div>

    <script>
	// just querying the DOM...like a boss!
    var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
 
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
 
// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);
 
    // identify the item for the activeLink
    link.itemID = i;
}
 
// set first item as active
links[activeLink].classList.add("active");
 
function setClickedItem(e) {
    removeActiveLinks();
    resetTimer();
    var clickedLink = e.target;
    activeLink = clickedLink.itemID;
 
    changePosition(clickedLink);
}
 
function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}
 
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    link.classList.add("active");
 
    var position = link.getAttribute("data-pos");
    var translateValue = "translate3d(" + position + ", 0px, 0)";
    wrapper.style[transformProperty] = translateValue;
}
var transforms = ["transform",
            "msTransform",
            "webkitTransform",
            "mozTransform",
            "oTransform"];
 
var transformProperty = getSupportedPropertyName(transforms);
 
// vendor prefix management
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

//
// The code for sliding the content automatically
//
var timeoutID;
 
function startTimer() {
    // wait 2 seconds before calling goInactive
    timeoutID = window.setInterval(goToNextItem, 2000);
}
startTimer();
 
function resetTimer() {
    window.clearInterval(timeoutID);
    startTimer();
}
 
function goToNextItem() {
    removeActiveLinks();
 
    if (activeLink < links.length - 1) {
        activeLink++;
    } else {
        activeLink = 0;
    }
 
    var newLink = links[activeLink];
    changePosition(newLink);
}
    </script>
    </body>
    </html>
```

---

<div class="post-metadata">

**Author:** ![Prax\_Saxena](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@Prax\_Saxena](https://forum.kirupa.com/u/Prax_Saxena)\
**Post date:** [January 14, 2015, 8:49am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/6 "2015-01-14T08:49:29Z")

</div>

Sorry for the irregularity in the code typing. I am new to embedding the code in a comment 😁

---

<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:** [January 15, 2015, 3:00am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/7 "2015-01-15T03:00:39Z")

</div>

Do you have a link to your non-working implementation that you can point us to instead? 🙂

I copied and pasted your code, and it worked fine for me. What exactly isn’t working for you? What browser are you testing against?

---

<div class="post-metadata">

**Author:** ![Vibha\_Upadhya](https://avatars.discourse-cdn.com/v4/letter/v/49beb7/32.png) [@Vibha\_Upadhya](https://forum.kirupa.com/u/Vibha_Upadhya)\
**Post date:** [April 29, 2015, 6:19am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/8 "2015-04-29T06:19:05Z")

</div>

Hi Kirupa …Many many thanks for the very nice tutorial…

I want to add multiple slide on the same page. I tried but didn’t work.

Can you please help me with this.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Roman\_Krasauskas](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@Roman\_Krasauskas](https://forum.kirupa.com/u/Roman_Krasauskas)\
**Post date:** [June 5, 2015, 1:52pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/9 "2015-06-05T13:52:25Z")

</div>

Hello ,

im just wondering , how to change slide to fade effect ? Can you help with that ? 🙂  
Best regards

---

<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:** [June 6, 2015, 9:43pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/10 "2015-06-06T21:43:14Z")

</div>

Can you elaborate a bit more? Do you want the content to fade in and fade out as you are sliding through each piece?

😃

---

<div class="post-metadata">

**Author:** ![grimdeath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/grimdeath/32/7124_2.png) [@grimdeath](https://forum.kirupa.com/u/grimdeath)\
**Post date:** [June 8, 2015, 4:01pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/11 "2015-06-08T16:01:13Z")

</div>

Roman, I made this fiddle [here](http://jsfiddle.net/nnkj9065/) not sure if this is what you are looking for. If it’s not hopefully ti will get you on the right path.

---

<div class="post-metadata">

**Author:** ![Roman\_Krasauskas](https://avatars.discourse-cdn.com/v4/letter/r/a9a28c/32.png) [@Roman\_Krasauskas](https://forum.kirupa.com/u/Roman_Krasauskas)\
**Post date:** [June 9, 2015, 10:49am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/12 "2015-06-09T10:49:45Z")

</div>

“content to fade in and fade out as you are sliding through each piece?”

exactly what i want ! 🙂

---

<div class="post-metadata">

**Author:** ![neeluser](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@neeluser](https://forum.kirupa.com/u/neeluser)\
**Post date:** [August 4, 2015, 9:51am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/13 "2015-08-04T09:51:01Z")

</div>

can’t we use availeble slider like flex slider or carousal slider etc

---

<div class="post-metadata">

**Author:** ![Mobirise](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mobirise/32/7335_2.png) [@Mobirise](https://forum.kirupa.com/u/Mobirise)\
**Post date:** [August 4, 2015, 11:31am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/14 "2015-08-04T11:31:46Z")

</div>

Thanks for the article. Here is another tutorial about making a slider: [http://rafbm.github.io/howtomakeaslider/](http://rafbm.github.io/howtomakeaslider/)

---

<div class="post-metadata">

**Author:** ![mordecai\_aro](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@mordecai\_aro](https://forum.kirupa.com/u/mordecai_aro)\
**Post date:** [March 5, 2017, 7:28am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/15 "2017-03-05T07:28:20Z")

</div>

Hi there, thanks heaps for the great tutorial.

I just have one question. When you’re viewing the last image of the sequence, and then you click to the first one, instead of ‘wrapping around’ and smoothly transitioning to it, instead you skim back past all the other images.

It’s a little difficult to describe, but you can see what I mean in the example immediately under the ‘Bonus: Automatic Content Slider’ heading. Link: [https://www.kirupa.com/html5/creating\_a\_sweet\_content\_slider.htm#sliderStart](https://www.kirupa.com/html5/creating_a_sweet_content_slider.htm#sliderStart)  
See the transition from last image to first.

How can I make it so that the transition from last image to first doesn’t pass by the other images? I’d really appreciate any tips. Thank you so much.

---

<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 6, 2017, 5:35am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/16 "2017-03-06T05:35:57Z")

</div>

That is an interesting question 🙂

Would you like the reset to just go to the second image naturally without revisiting old images? If so, one way you can do that is by having the first image duplicated after the last one. When you reset, you go to the “next” copy of the first image. Behind the scenes, once that happens, you secretly jump from the copy of the first image to the actual first image itself. That can give you the effect you are looking for.

I am just thinking out loud here, so I am hoping others have some better suggestions. I will fiddle with trying to create this sometime this week if I have some time!

---

<div class="post-metadata">

**Author:** ![mordecai\_aro](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@mordecai\_aro](https://forum.kirupa.com/u/mordecai_aro)\
**Post date:** [March 6, 2017, 6:49am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/17 "2017-03-06T06:49:00Z")

</div>

Thanks very much for your reply, Kirupa!

What I mean is that when moving from _ **Image4 → Image1** _, I would like it to be a direct transition, rather than going _**Image4 [→ Image3 → Image2] → Image1**_.  
Hopefully this makes sense - I think we’re on the same page.

That’s a good idea, of a doubled first image that ‘redirects’ to the actual first image. I don’t totally understand how it would work, but I could probably play around and figure it out.

Yet, it seems that there must be a cleaner way to achieve this. Hmmm. Let me know if you come up with anything! Thanks again 🙂

---

<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 26, 2017, 5:38pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/18 "2017-03-26T17:38:42Z")

</div>

This is really well put together. Thank you.

Is there anyway of passing different durations into the Javascript so that you can keep some slides onscreen for longer than others?

---

<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, 1:33am UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/19 "2017-03-27T01:33:07Z")

</div>

Ray! There is, but it will require modifying the code a bit to do that. At a high-level, one way to do that would be to store the duration a custom property (or even `data-` attribute in the HTML) for each element. Once you have that, you can read that duration value and use it on a setTimeout/setInterval call.

I don’t have the time right now to do that, but I’ll look into it by end of the week (unless somebody beats me to it) 🙂

---

<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 27, 2017, 12:05pm UTC](https://forum.kirupa.com/t/creating-a-sweet-content-slider/352067/20 "2017-03-27T12:05:42Z")

</div>

> [@kirupa](#):
>
> data- attribute in the HTML

Thank you Kirupa, I wondered about a data- tag but they are new to me and I wasn’t sure how to code them. Will investigate…

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