Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Regarding to have dot navigation in slider

  1. #1
    Join Date
    Oct 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Regarding to have dot navigation in slider

    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

  2. #2
    Join Date
    Oct 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi All,

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

    Thanks
    Kaushal

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Oct 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    If possible then only Here is my site sol.ticketebo.com.au/index.php username - ticketebo & password - 4tickstaboo!

    Thanks
    Kaushal

  7. #7
    Join Date
    Oct 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John & vwphillips,

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

    Thanks
    Kaushal

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-03-2013 at 07:50 PM. Reason: add note
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Oct 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Resolved Navigation arrows for Featured Content Slider
    By Paramasivan in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-09-2013, 08:29 PM
  2. Dynamic Drive Content Slider Navigation
    By element059 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-08-2011, 01:41 PM
  3. need similar to "Featured Content Slider" but want navigation to be vertical
    By stolen_gtr in forum Looking for such a script or service
    Replies: 1
    Last Post: 10-04-2010, 11:01 AM
  4. Replies: 0
    Last Post: 08-05-2010, 08:17 PM
  5. Featured Content Slider v2.4 - one slider with several paginate-slider
    By beathead in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-05-2008, 09:05 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •