Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Can you add Carousel for thumbnail #274

Closed
tquoc229 opened this issue Jul 19, 2013 · 7 comments
Closed

Feature request: Can you add Carousel for thumbnail #274

tquoc229 opened this issue Jul 19, 2013 · 7 comments

Comments

@tquoc229
Copy link

@tquoc229 tquoc229 commented Jul 19, 2013

This is the best of slider a I have been used. I think it will better if you can add new feature like http://archive.plugins.jquery.com/project/galleryview or http://coffeescripter.com/code/ad-gallery/.
Thanks.

@Metalchocobo
Copy link

@Metalchocobo Metalchocobo commented Jul 20, 2013

This feature will be very usefull, but at moment you can link 2 Sliders.
Example: http://gualini.adostudio.it/realizations_2.html#

Snippet: http://jsfiddle.net/DcpdT/
This code is not optimized and is old, but you can use it like ispiration.

@scooterlord
Copy link

@scooterlord scooterlord commented Sep 26, 2013

This is what I am looking for as well!

@terkelg
Copy link

@terkelg terkelg commented Oct 3, 2013

I could use it too

@skyzito
Copy link

@skyzito skyzito commented Jun 2, 2014

+1

1 similar comment
@lukaszjurys
Copy link

@lukaszjurys lukaszjurys commented Sep 11, 2014

+1

@Tidal-Wave
Copy link
Collaborator

@Tidal-Wave Tidal-Wave commented Jan 21, 2015

Hi, I'll be helping maintain this project. The original links seem to be dead but I assume the request is for thumbnail improvements like carousel. I plan on looking at this in a future update. I'm closing this for now as I clean things up.

@gergely-42droids
Copy link

@gergely-42droids gergely-42droids commented Feb 17, 2015

A simple idea for anybody who wants to do this:

HTML

    <!-- The main images -->
    <ul class="bxslider">
        <li><img src="" alt=""></li>
        [more li here]
    </ul>

    <!-- The thumbnails -->
    <ul class="bxslider-pager">
        <li><a data-slideIndex="0" href=""><img src="" alt=""></a></li>
        [more li here]
    </ul>

JS

    var slider = $j(".bxslider").bxSlider({
      mode: 'fade',
      auto: true,
      controls: false,
      pager: false,
    });

    var sliderPager = $j(".bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 15,
      slideWidth: 45,
      slideMargin: 5,
      moveSlides: 4,
      auto: false,
      pager: false,
    });

    $j('.bxslider-pager li').on('click', 'a', function(e){
      e.preventDefault();   
      slider.stopAuto();
      slider.goToSlide($j(this).attr('data-slideIndex'));
    });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants