jQuery carousel

若如初见. 提交于 2020-01-03 05:38:20

问题


as so many other people I am looking for a carousel for my homepage. I already had a look at the market.

My favorite would be a mix of several existings ones. And, if possible, it should be based on jQuery, since I am using that already. Some good carousels are based on mootools, though.

So, what do I like? noobSlide is nice. Perfect would be the a mix from 6 and 7: 6 has the larger picture with some overlay and link. 7 has the parallel positioning of the images. Problem: I have >50 not 8, so I would need some kind of slider. SmoothGallery has a nice slider (after clicking on pictures).

So, with the requirements

  • larger picture with overlay (infos + link(s))
  • horizontal slider control with scrolling
  • If possible, jQuery

Where would you send me? Some cool component/library I missed?


回答1:


If you like carousel on this page:

http://www.adventure-service.com/

I'm using this plugin:

http://thomlx.free.fr/jquery/jquery_carousel.htm

Just include that javascript file, put html as follows:

                    <div id='banner_container'>
                        <ul>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                            <li><img src='' alt='' /></li>
                        </ul>
                    </div>

Make a call to this function:

        $('#banner_container').carousel();

And that's it. If you want for example auto slide and buttons so you can click on each button and coresponding image to show up:

        $('#banner_container').carousel({
            autoSlide: true, 
            autoSlideInterval: 4000,
            pagination: true
        });



回答2:


If you'd like it to be fully keyboard accessible, try KATC.



来源:https://stackoverflow.com/questions/3172991/jquery-carousel

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!