Fork me on GitHub
Post Format

Full Screen Responsive jQuery Image and Content Slider:RSlider

Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

Full screen jQuery Responsive Image and Content Slider

RSlider Features

  • Supports Categories
  • Full Screen
  • Responsive

Configuring Your Slider

Configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this.

First you need to create the necessary HTML markups for your slider and then add references to necessary script files, here is the complete working example of RSlider. Where the value of href of anchor tags in each “li” corresponds to the id of the image container div for that category. e.g for href=”#firs-cat” there will be a div element with id=”first-cat”.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Responsive Image and Content Slider Demo</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="js/jquery.responsive.slider.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#r-slider-wrapper').rslider();
        });
    </script>
</head>
<body>
    <div id="r-slider-wrapper">
        <div id="r-slider-category-wrapper">
            <ul>
                <li><a href="#first-cat">First Category</a> </li>
                <li><a href="#second-cat">Second Category</a> </li>
                <li><a href="#third-cat">Third Category</a> </li>
                <li><a href="#fourth-cat">Fourth Category</a> </li>
            </ul>
            <div id="r-slider-content-right">
                <div id="r-nav">
                    <img src="images/prev.png" id="r-prev" alt="Previous" /> <img id="r-next" src="images/next.png"
                        alt="Next" />
                </div>
            </div>
        </div>
        <div id="r-slider-contents-wrapper">
            <div id="r-slider-content-left">
                <div id="first-cat">
                    <div class="r-img-wrap">
                        <img src="images/1.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/3.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div id="second-cat">
                    <div class="r-img-wrap">
                        <img src="images/1a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/3a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5a.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div id="third-cat">
                    <div class="r-img-wrap">
                        <img src="images/1b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/1.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/4.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5a.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
                <div id="fourth-cat">
                    <div class="r-img-wrap">
                        <img src="images/1c.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2a.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/1b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/2b.jpg" />
                    </div>
                    <div class="r-img-wrap">
                        <img src="images/5.jpg" />
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
close

Want this freebie? Enter your email and get it now!

Enter your email address to get the download link. Your email address will never be shared and only be used to send the download link.

Related Posts

  1. jQuery Content Slider :jsCarousel
  2. jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider
  3. jQuery Content/Thumbnail Slider V2.0: jsCarousel V2.0
  4. jQuery Image / Content Slider Plugin: Quake Slider
  5. jQuery Sliding Content Bar Plugin: PushUp Content Bar

49 comments

  1. Pingback: 15 Best jQuery Sliders Free | The Gfx Daily

  2. Pingback: 15 jQuery Sliders to create Slides for Website | TUTORIALS

  3. Pingback: Top jQuery Slider Plugins for Frontend Web Developers | Web Design Blog

  4. Pingback: Top jQuery Slider Plugins for Frontend Web Developers - DesignM.ag

  5. Pingback: 20 Awesome jQuery Sliders

  6. Pingback: 10 Useful Free jQuery Sliders | Web Design blog, Design Inspiration - Downgraf

  7. Pingback: 30 Free and Premium Responsive jQuery Slider Plugins - Street Smash

  8. Pingback: Design District Auction » JQuery Plugins That Made Web Development Super

  9. Pingback: 50 Most Useful jQuery Plugins from 2012

  10. Pingback: Fantastic and Popular jQuery Plugins | Smashing Magazine

  11. Pingback: 40+ best free & premium JQuery/javascript Sliders, banner rotators, Carousels and Galleries pluginsPlatina Studio Blog | Platina Studio Blog

  12. Pingback: Complete list of free & premium JQuery/javascript Sliders, banner rotators, Carousels and Galleries pluginsPlatina Studio Blog | Platina Studio Blog

  13. Pingback: w3talks 50 полезных плагинов JQuery 2012 года » w3talks

  14. Pingback: 40 New jQuery Plugins for Web Developers | Splashnology

  15. Pingback: Responsive jQuery Slider Plugins — Dzine Watch

  16. Pingback: 26 Best of jQuery Image Slider & Responsive Plugins

  17. Pingback: iPhone5はじめました(ホームページのスマホ対応ますますお任せください) :: 横浜のフリーランスWeb制作者ブログ

  18. Pingback: 30 Responsive jQuery Slider Plugins for 2013 | Web Design Inspiration

  19. Pingback: 10 инструментов для создания адаптивного дизайна — часть 2 | webkladez - Полезные уроки для photoshop, wordpress, joomla

  20. Pingback: Responsive Web Design: Fresh Tools, Articles and Tutorials | Splashnology

  21. Pingback: jQuery sliders | Pearltrees

  22. Pingback: 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】 « 成人免费资源三级分享网站

  23. Pingback: 20 Amazing Responsive jQuery Slider Plugins

  24. Pingback: フルスクリーンのコンテンツイメージスライダーのjQueryプラグイン | ECサイト|システム開発会社|スターフィールド

  25. Pingback: 20 New jQuery Plugins Worth Taking a Look at - Speckyboy Design Magazine

  26. Pingback: Tweet Heat - The hottest Tweets of the Month [Sep 2012] | Inspired Magazine

  27. Pingback: Blodhemn ! | Tweet Heat – The hottest Tweets of the Month [Sep 2012]

  28. Pingback: 25 diaporamas et galeries d’images flexibles et gratuits « crea.sit.web – le.blog !

  29. Pingback: Today’s 10 Random jQuery Plugins | jQuery4u

  30. Pingback: 30 Freash Jquery and CSS3 Effects Tutorials

  31. Pingback: КиберБит | Дайджест интересных новостей и материалов из мира айти за последнюю неделю (15 — 21 сентября 2012)

  32. Pingback: 見た人の注意を引き付けるjQueryプラグイン | TIPSMIX

  33. Pingback: RSlider - A full screen responsive jQuery image & content slider - CodeVisually

  34. Pingback: Wordpress Leaks » 20 New jQuery Plugins Worth Taking a Look at

  35. Pingback: Responsive jQuery Image Slider Plugins: List of Best Ones Only | Webblog360

  36. Pingback: 20 New jQuery Plugins Worth Taking a Look at | t1u

  37. Pingback: 20 New jQuery Plugins Worth Taking a Look at | CSS Tips

  38. Pingback: 20 New jQuery Plugins Worth Taking a Look at | Web Dezining

  39. Pingback: RSlider : Full Screen and Responsive jQuery Slideshow - Webresourceszone

  40. Pingback: 15 Feature-Rich Best jQuery Slideshow Plugins

  41. Pingback: 2012年30个新鲜和有用的CSS3和Jquery效果教程 | 我们爱网页设计

  42. Pingback: Responsive jQuery Image Slider Plugins | Front-End Magazine

  43. Pingback: 你用的到的精美jQuery&CSS3效果 | CSSwang-CSS网站

  44. Pingback: 你用的到的精美jQuery&CSS3效果 | licqi IT技术

  45. Pingback: 怨人之心怨已,恕已之心恕人 » Blog Archive » 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

  46. Pingback: Full Screen Responsive jQuery Image and Content Slider:RSlider | TEKNQ

Leave a Reply

Required fields are marked *.


8 × = forty eight