Regarding to have dot navigation in slider

[kaushal3]

Hi All,

Can anyone please help with the slider navigation issue?

I want to have dot navigation in the bottom of slider so that it can slide accordingly.

I am using tympanus.net/Development/CircularContentCarousel/ (this slider). Actually I tried to attach source but when I am uploading zip file......it just loading infinitely so that I put the site link directly

Thanks
Kaushal

[kaushal3]

Hi All,

Won't it be possible to put dot navigation in the above demo?

Thanks
Kaushal

[vwphillips]

I am not willing to modify that script but have made this DRAFT

http://www.vicsjavascripts.org.uk/Mo...el/131003A.htm

the pagination dots can be made round with DIV elements round background images

[kaushal3]

Thanks vwphillips

Great idea. Phillip can you please give the code that which part is necessary to have dots available & the javascript.
One more thing I would like to ask is....Whether dots will increase if the slider items increase or they will remain of same amount?

Phillips really...thanks to you that you helped
Thanks
Kaushal

[jscheuer1]

You can also make the page buttons round in IE 9+ and all other modern browsers by adding the highlighted:

#paginate .page {
	position:relative;
	width:20px;
	height:20px;
    border:solid red 1px;
    border-radius: 10px;
    float:left;
    margin:10px;
    background-Color:#FFCC66;
}

[kaushal3]

Hi John & vwphillips,

First of all thank you both for helping me

Now vwphillips, I tried your solution but the situation right now is....slider is ready & css is also done now to turn the whole thing in new one would be very difficult
So I wish if you can add dot navigation in my existing slider by adding some code in existing js or by giving separate js code

Thanks
Kaushal

[kaushal3]

Hi John & vwphillips,

Sorry to inform you that my slider is having heading as "Popular Events" (so that one)

Thanks
Kaushal

[jscheuer1]

Demo:

http://home.comcast.net/~jscheuer1/s...ntentCarousel/

Only the index.html file (added some styles in the head and a little markup at the end) and the jquery.contentcarousel.js (extensive changes) files have changed. Usage is basically the same. A zip of the changed files is here:

http://home.comcast.net/~jscheuer1/s...uselupdate.zip

Any questions, just let me know.



Note: Although this script was originally setup with the obvious intention to be able to do more than one of these on a page, it has a flaw in that area. I did nothing to make it worse, but I didn't fix it either. It would only be a problem if settings other than the defaults were used, and only then if those settings differed between the two sliders or one had the defaults and another didn't. At least that's how it looks to me, there could be more problems in that area that I missed. But for just one slider on a page, it's fine.

[kaushal3]

Hi John,

Excellent solution only js changed & dots inclusion. Really great Thank you John for helping

Now John can you please tell me why these much number of dots are coming? It should slide the whole slide when we click on single dot (I mean 3 or 4 items which are currently displayed they all should move). so number of dots will be very less

So can you please tell me how to do that?

Thanks John again for your help

Thanks
Kaushal

[jscheuer1]

The number of dots is the same as the number of li elements you put here:

<div class="pagebuttons">
<ul>
<li class="activebutton">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>

In fact, each li is a dot. The demo that comes with the script only has 8 slides, so there are only 8 li's in the above. On the page you linked to in your post there are 10 slides, so it should have 10 li's.

When you click on a dot, that slide will move to the far left position in the slider.

When you move the slider using its next/previous buttons or the mouse, the slide that ends up at the far left position will have its dot highlighted.

That's pretty much it.