PDA

View Full Version : Regarding to have dot navigation in slider



kaushal3
10-02-2013, 04:50 AM
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
10-03-2013, 03:33 AM
Hi All,

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

Thanks
Kaushal

vwphillips
10-03-2013, 05:09 AM
I am not willing to modify that script but have made this DRAFT

http://www.vicsjavascripts.org.uk/MoreLessCarousel/131003A.htm

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

kaushal3
10-03-2013, 05:54 AM
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
10-03-2013, 09:46 AM
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
10-03-2013, 11:05 AM
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
10-03-2013, 11:11 AM
Hi John & vwphillips,

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

Thanks
Kaushal

jscheuer1
10-03-2013, 07:44 PM
Demo:

http://home.comcast.net/~jscheuer1/side/demos/CircularContentCarousel/

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/side/demos/CircularContentCarousel/CircularContentCarouselupdate.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
10-04-2013, 03:06 AM
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
10-04-2013, 04:24 AM
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.

kaushal3
10-04-2013, 04:46 AM
Hi John,

Yes you are right john but is there any way to get less number of dots & one dot will cause 3 or 4 items to slide? so if total number of items are 10 & at a time we are able to see 4 items in slider then I want to show 3 dots i.e. 10/4 = 2.5 = 3 dots (consisting of 4 items to slide)

Can you please help with this? :) & John me too did some customization like following :-



for(i=0; i<diff; i++)
{
jQuery('.ca-nav-next').trigger('click');
}


This loop will call number of next slide to display......means if I load the page then current slide will show me 4 items....now if I click on 3 then it should slide 2 times right john? the above loop will do the same but unfortunately loop is running 2 times but it only triggers click 1 time :( do you know why this is like so?

Thanks
Kaushal

kaushal3
10-04-2013, 04:50 AM
Hi John,

Here is the full code of javascript which I wrote for dots :)


<script>
function sliding(v)
{
var diff = Math.abs(document.getElementById('sliding_current').value - v);

if(document.getElementById('sliding_current').value == v)
{
return false;
}
if(document.getElementById('sliding_current').value < v) // do next
{
var i=0;
for(i=0; i<diff; i++)
{
jQuery('.ca-nav-next').trigger('click');
}
}
else // do previous
{
var i=0;
for(i=0; i<diff; i++)
{
jQuery('.ca-nav-prev').trigger('click');
}
}
document.getElementById('sliding_current').value=v;
}
</script>
<input type="hidden" name="sliding_current" id="sliding_current" value="1">
<ul>
<li id="1" onclick="sliding('1')">1</li>
<li id="2" onclick="sliding('2')">2</li>
<li id="3" onclick="sliding('3')">3</li>
<li id="4" onclick="sliding('4')">4</li>
</ul>


by default sliding_current's value will be 1. Hope this helps :)

Thanks
Kaushal

jscheuer1
10-04-2013, 04:55 AM
As long as it works for you, that's fine with me.

kaushal3
10-04-2013, 05:00 AM
Hi John,



for(i=0; i<diff; i++)
{
jQuery('.ca-nav-next').trigger('click');
}


In above code if the loop is running 2 times then jQuery('.ca-nav-next').trigger('click'); this statement is executing only once. Any idea why is it so? I am very close John.

Thanks
Kaushal

kaushal3
10-04-2013, 05:01 AM
Hi John,

Or you can also give any js code which will slide all 3 or 4 items at a time. I will include that js.

Thanks
Kaushal

jscheuer1
10-05-2013, 01:49 AM
I'm a little confused. First you wanted dot navigation. You got that. Now you seem to want to have the slider move more than one slide at a time. The original script actually allows for that, but it's either one slide at a time or 2 or 3. I think if you can fit more slides in the viewable area, like your demo where there are 4 that fit into that area, you can do more, but the script code would have to be changed because it has a limit of 3.

In any case, I just looked at your demo page again, and it looks like it's working the way you've been saying that you want it too.

Is there still a problem?

jscheuer1
10-06-2013, 02:34 AM
Although these look promising, there might still be some problems with them

After seeing what you have there, or had there when I posted my last message, which I think you must have used a different script for, if you want to use the script you originally asked about, I have two new demos for you. They both use the same updated script and css, which if you're interested in I can link you to. Each has some differences in markup, but those are right on the page. The first steps by 4 and is truly continuous, has a circle button for each item that tracks where you are, and the 'More' links still work:

http://home.comcast.net/~jscheuer1/side/demos/CircularContentCarousel/index2.html

and this one which looks essentially the same as what you had up last I checked. With it you move 4 panes at a time and there's a circle button for each panel of 4 items, and blank panels are used so that the total is evenly divisible by 4 (actual panels could and ideally should be used in place of these), no 'More' links allowed (they can be there, but they will be disabled and hidden because, if they were used, they would screw up the tracking/navigation of the circle buttons):

http://home.comcast.net/~jscheuer1/side/demos/CircularContentCarousel/index3.html

Although these look promising, there might still be some problems with them

Oct 12th, 2013 - Just updated the main script to fix problem with expanding contracting using more button (affects index2 page only)

kaushal3
10-10-2013, 05:04 AM
Thanks John for your kind help :)

Your 2nd demo was the thing I were looking for :) more slides but less dots.

Thanks John for such a nice help :)

Thanks
Kaushal

jscheuer1
10-10-2013, 05:34 AM
You're welcome. If you need any help finding the files or configuring it to your setup, let me know.