Responsive CSS3 slider. Responsive slider without Javascript on CSS3 jQuery plugin "Sly"

Working on a book about jQuery, I came across the fact that many of my subscribers asked me to tell in it how to write a slider script in jquery. Sorry, dear friends! In the yard of the XXI century and, fortunately, we have access to all the delights of CSS3, allowing us to implement such things without a single line javascript.

Part 1.

To begin with, I will explain to those who do not know what a slider is. Slider- this is a block of a certain width that occupies part of the web page, or its entirety. Its main feature in changing in automatic or manual mode content. Content can be graphic images, and some text.

Of course, you may ask: why reinvent the wheel when there are a lot of slider implementations in javascript? Here are my arguments:

  1. CSS effects work faster. This is clearly visible in mobile devices Oh.
  2. No programming skills are required to create a slider.

So, for our example, you need four images, although in your project you can make a strip with as many images as you need. The only condition is that all images must be the same size. Also, I forgot to tell you, our slider will be adaptive (yes, yes, Adaptive layout , you read that right) and you can use it in any of your projects for any device. But, enough chatter, my hands are already itching to write mega-code. Let's start with HTML:

I left the alt attribute empty to save space, but you can fill it yourself based on your SEO requests and to inform users who have disabled images in the browser. I also want to draw your attention to the fact that the first image ( alladin.jpg) will also be present at the end of the strip, which will allow our slider to scroll cyclically without jerking.

For convenience, the width is 80% of the window, and the max-width is the size of each individual photo (1000px in our example), because we don't want the image to be stretched:

Slider ( width: 80%; max-width: 1000px; )

In our CSS code, figure's width is expressed as a percentage of the div in which it is located. That is, if the image strip contains five photos and the div renders just one, the width of the figure is increased five times, which is 500% of the width of the container div:

The font-size: 0 parameter deflates all the air from figure, removing free space around and between images. position: relative makes it easy to move the figure during the animation.

We need to split the photos equally within the image strip. The formula is very simple: if we assume figure is 100% wide, each image should take up 1/5 of the horizontal space:

There is a need to use the following CSS rule:

Imagestrip img ( width: 20%; height: auto; )

Now let's change the overflow property for the div:

Slider ( width: 80%; max-width: 1000px; overflow: hidden )

Finally, we need to make the image strip move from left to right. If the width of the container div is 100%, each movement of the image strip to the left will be measured as a percentage of that distance:

@keyframes slidey ( 20% ( left: 0%; ) 25% ( left: -100%; ) 45% ( left: -100%; ) 50% ( left: -200%; ) 70% ( left: -200 %; ) 75% ( left: -300%; ) 95% ( left: -300%; ) 100% ( left: -400%; ) )

Each image on the slider will be wrapped in a div and will move 5%.

Slider figure ( position: relative; width: 500%; animation: 30s slidy infinite; font-size: 0; padding: 0; margin: 0; left: 0; )

Part 2.

We made a mega-cool slider without javascript. And let's, before we go to rest on our laurels, add control buttons to it. More precisely, not into it (I'm already too lazy to mess with it), but let's create a new one.


So our HTML code is:

Now let's take care of the animation of our slides. Unfortunately, for a different number of slides, it will be different:

/* for a two-slide slider */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100%( opacity:0;) ) /* for a three-slide slider */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% (opacity: 0;) 100%(opacity:0;) ) /* for a four slide slider */ @keyframes slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity:1; ) 33% (opacity:0;) 100%(opacity:0;) ) /* for a five-slide slider */ @keyframes slider__item-autoplay_count_5 ( 0%(opacity:0;) 7% (opacity:1;) 20 %(opacity:1;) 27% (opacity:0;) 100%(opacity:0;) )

Sad, isn't it? In addition, do not forget that for Opera, Chrome, IE, and Mozilla, you need to write everything the same, but with the appropriate prefix. Now let's write the code to animate our slides (hereinafter, the code for three slides will be shown. You can see the code for more sites in the example code):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; animation: slider__item-autoplay_count_3 15s infinite; ) .item:nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; )

As you can see, for the first pair, the zero offset does not change. In addition, the offset does not depend on the number of slides, so it can be described once for the maximum number of slides. Now let's make sure that the slides do not change when the user hovered over our slider:

Slider:hover .item ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; )

Finally, we got to switching our slides. As you know, there are a number of events that allow you to change the properties of an element using CSS. For a mouse click, we can use the :focus , :target , or :checked pseudo-classes on one of the page elements. The :focus pseudo-class can only have one element per page, :target pollutes the browser's history and requires the tag; The :checked pseudo-class remembers the state before leaving the page, and, in the case of radio buttons, can only be selected on one element in the group. Let's use this. Insert before

following html code

And then

:

/* Style the sliders in the "not selected" state */ .slider .item ~ .item ( opacity: 0.0; ) /* Style the sliders in the "selected" state */ .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type( 3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth- of-type(5):checked ~ .item:nth-of-type(5) ( opacity: 1.0; )

We used toggling the opacity property of the container slide with the picture. This is due to the fact that in the div container, unlike the img element, you can put any Additional information(for example, the title of the slide). Of course, if we were using Javascript, we could use the data attribute. But we agreed, remember?)) For the slides, we will specify the transition properties so that the switching occurs smoothly, and not jerkily.

Slider .item ( -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; )

Stopping the animation of all slides and buttons when any slide is selected can be done using the following CSS code:

Slider input:checked ~ .item ( opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; )

To support some older browsers, we don't animate the first slide by setting it to opacity: 1.0 , but we have a problem when we smoothly switch the other two slides between each other, the first slide will show through. To eliminate this bug, set the transition-delay for all slides except the selected one, and for it we will make the z-index higher than for all other slides:

Slider .item ( opacity: 1.0; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; ) .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth -of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) ( transition: opacity 0.2s linear; -moz-transition : opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; z-index: 6; )

So that the slides do not conflict with other elements of the site (for example, do not overlap the drop-down menu with a z-index less than or equal to 6), we create our own context for the block

by setting the minimum required for visibility, z-index:

Slider ( position: relative; z-index: 0; )

That's actually all. It remains only to position our elements using the following CSS code and we can rejoice:

Slider ( position: relative; z-index:0; ) .slider input ( display: none; ) .slider label ( bottom: 10px; display: inline-block; z-index: 2; width: 26px; height: 27px; background: #f4f4f5; border: 1px solid #e6e6e6; border-bottom-color: #bfbfbf; border-radius: 4px; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #000000; text-align: center; cursor: pointer; font: 14px/27px arial, tahoma; color: #333; ) .slider .selector_list ( position: absolute; bottom: 15px; right: 15px; z-index: 11; ) .slider .item ( position: relative; width:100%; ) .slider .item ~ .item ( position: absolute; top: 0px; left: 0px; )

Here is a responsive slider without Javascript on CSS3 you should end up with.

Currently, a carousel slider is a functionality that is simply necessary to have on a business website, portfolio website or any other resource. Along with full-screen image sliders, horizontal carousel sliders fit well into any web design.

Sometimes the slider needs to take up one third of the site page. Here the carousel slider is used with transition effects and with responsive layouts. E-commerce sites use a carousel slider to showcase multiple photos in separate posts or pages. The slider code is free to use and change according to your needs.

Using jQuery together with HTML5 and CSS3, you can make your pages more interesting by providing them with unique effects and draw the attention of visitors to a specific area of ​​the site.

Slick - modern carousel slider plugin

Slick is a freeware jquery plugin whose developers claim that their solution will satisfy all your slider requirements. Responsive Slider– the carousel can work in the “ tiles» for mobile devices, and, in the « drag and drop» for the desktop version.

Contains the transition effect " damping", an interesting opportunity " center mode”, lazy loading images with autoscroll. Updated functionality includes adding slides and a slide filter. Everything for you to customize the plugin according to your requirements.

Owl Carousel 2.0 - jQuery plugin for touch devices

This plugin has a large set of features, suitable for both beginners and experienced developers. This is an updated version of the carousel slider. His predecessor had the same name.

The slider has some built-in plugins to improve the overall functionality. Animation, video playback, slider autoplay, lazy loading, automatic height adjustment - the main features.

Feature support drag and drop drop included for more convenient use of the plugin on mobile devices.
The plugin is perfect for displaying large images even on small screens of mobile devices.

A rather small but rich jquery plugin that allows you to place a carousel slider on the page, which has a small core and does not consume a lot of site resources. The plugin can be used to display vertical and horizontal sliders, with animation and create sets of images from the gallery.

AnoSlide - Ultra compact responsive jQuery slider

Ultra compact jQuery slider- a carousel, the functionality of which is much more than that of a conventional slider. They include a single image preview, a multi-image carousel display, and a title-based slider.

Owl Carousel - jquery slider - carousel

- support slider touch screens and technology drag and drop, easily integrated into HTML- the code. The plugin is one of the best sliders that allow you to create beautiful carousels without any specially prepared markup.

3D gallery - carousel

Uses 3D transitions based on css– styles and a little javascript code.

Gorgeous 3D carousel. It looks like it's still a beta version, because I found a couple of problems with it just now. If you are interested in testing and creating your own sliders, this carousel will be of great help.

Carousel using bootstrap

Responsive slider - carousel using technology just right for your new website.

Bootstrap based slider framework - Moving Box Carousel

Most sought after on portfolio and business websites. A similar type of carousel slider is often found on sites of any type.

This tiny size slider is ready to work on devices with any screen resolution. The slider can work both in circular and carousel mode. tiny circle presented as an alternative to other sliders of this type. Has built-in support operating systems iOS and Android.

In circular mode, the slider looks quite interesting. Well implemented method support drag and drop and an automatic slideshow system.

Powerful, adaptive, carousel-type slider is perfect for a modern site. Works correctly on any device. Has horizontal and vertical modes. Its size is minimized to just 1 KB. The ultra compact plug-in has excellent smooth transitions.

wow - slider - carousel

Contains over 50 effects that can help you create an original slider for your site.

Resize the browser window to see how the slider adapts. Bxslider comes with over 50 customization options and showcases its features with various transition effects.

jcarousel - jquery a plugin that will help organize the viewing of your images. You will be able to easily create custom image carousels from the framework shown in the example. The slider is responsive and optimized for mobile platforms.

Scrollbox - jQuery Plugin

scroll box compact plugin for creating a slider - carousel or text running line. Key features include a vertical and horizontal scrolling effect with a pause on mouse hover.

A simple carousel slider. If you need a fast plugin, this one is 100% suitable. Comes with only the basic features needed to make the slider work.

Flexisel: Responsive JQuery Carousel Slider Plugin

The creators took inspiration from the old-school plugin, making a copy of it, focused on the correct operation of the slider on mobile and tablet devices.

Responsive layout, when working on mobile devices, differs from the layout focused on the size of the browser window. perfectly adapted to work on screens, both low and high resolution.

Elastislide - Responsive Carousel Slider

Perfectly adapts to the screen size of the device. You can set the minimum number of images to display at a certain resolution. Works well as a carousel slider with image galleries using a fixed wrapper along with a vertical scroll effect.

Free slider from Woothemes. It is rightfully considered one of the best responsive sliders. The plugin contains several templates and will be useful for both novice users and experts.

Amazing Carousel

Amazing Carousel- responsive image slider on jQuery. Supports many content management systems such as WordPress, Drupal and Joomla. Also supports Android and iOS and desktop versions of operating systems without any compatibility issues. Built-in amazing carousel templates allow you to use the slider in vertical, horizontal and circular modes.

Time does not stand still and with it progress. This also affected the Internet. You can already see the change appearance sites, especially adaptive design is very popular. And as a result, many new responsive jquery sliders, galleries, carousels or similar plugins.
1. Responsive Horizontal Posts Slider

Responsive horizontal carousel with detailed installation instructions. It is made in a simple style, but you can style it for yourself.

2. Slider on Glide.js

This slider is suitable for any site. This uses Glide.js with open source. Slider colors can be easily changed.

3. Tilted Content Slideshow

Responsive content slider. The highlight of this slider is the 3d effect of images, as well as various random appearance animations.

4. Slider using HTML5 canvas

Very beautiful and impressive slider with interactive particles. Made with HTML5 canvas

5. Image Morphing Slider

Slider with morphing effect (Smooth transformation from one object to another). In this example, the slider is well suited for the portfolio of a web developer or a web studio in the form of a portfolio.

6. Circular Slider

Slider in the form of a circle with the effect of flipping the image.

7. Blurred background slider

Responsive slider with switching and background blur.

8. Responsive fashion slider

Simple, lightweight and responsive website slider.

9. Slicebox - jQuery 3D image slider(UPDATED)

Updated version of Slicebox slider with fixes and new features.

10.Free Animated Responsive Image Grid

A jQuery plugin for creating a flexible image grid that will switch shots using different animations and timings. This can look good as a background or decorative element on the site, as we can set the selective appearance of new images and their transitions. The plugin is made in several versions.

11.Flex slider

Universal free plugin for your site. This plugin comes in multiple slider and carousel options.

12. Photoframe

Fotorama- This universal plugin. It has many settings, everything works quickly and easily, it is possible to view slides in full screen. The slider can be used both in fixed size and adaptive, with and without thumbnails, with and without circular scrolling and much more.

P.S.I put the slider several times and I think that it is one of the best

13. Free and Responsive 3D Thumbnail Gallery Slider.

Experimental slider gallery 3DPanelLayout with grid and interesting animation effects.

14. Slider on css3

Responsive slider made using css3 with smooth appearance of content and light animation.

15. WOW Slider

WOW Slider is an image slider with amazing visual effects.

17.Elastic

Elastic slider with full responsiveness and slide thumbnails.

18. Slit

This is a fullscreen responsive slider using css3 animation. The slider is made in two versions. The animation is done quite unusually and beautifully.

19. Responsive photo gallery plus

Simple free slider gallery with image upload.

20. Responsive slider for WordPress

Responsive free slider for WP.

21. Parallax Content Slider

Slider with parallax effect and control of each element with using CSS 3.

22. Slider with music binding

Slider using open source JPlayer. This slider resembles a presentation with music.

23. Slider with jmpress.js

The responsive slider is based on jmpress.js and will therefore allow some interesting 3D effects to be applied to the slides.

24. Fast Hover Slideshow

Slide show with fast slide switching. Slides switch on hover.

25. Image Accordion with CSS3

Image accordion with css3.

26. A Touch Optimized Gallery Plugin

This is a responsive gallery that is optimized for touch devices.

27. 3D Gallery

3D Wall Gallery- created for the Safari browser, where the 3D effect will be visible. When viewed on a different browser, the functionality will be fine, but the 3D effect will not be visible.

28. Slider with pagination

Responsive pagination slider with jQuery UI slider. the idea is to use a simple navigation concept. It is possible to rewind all images or switch between slides.

29.Image Montage with jQuery

Automatic arrangement of images depending on the width of the screen. A very useful thing when developing a portfolio site.

30. 3D Gallery

A simple 3D circular slider in css3 and jQuery.

31. Full screen mode with 3D effect on css3 and jQuery

Slider with the ability to view full-screen images with a beautiful transition.

If you need to add a high-quality jQuery image slider to your site, then in this article you will find a description the right plugins. Even though jQuery has made JavaScript much easier to work with, we still need plugins to speed up the web design process.

We can make changes to some of these plugins and create new sliders that are much better suited to the needs of our site.

For other sliders, just add titles, images, and select slide transition effects that come with the slider. All of these plugins come with detailed documentation, so it's easy to add new effects or features to them. You can even change event-based triggers if you're an experienced jQuery programmer.

Recent trends such as responsive design are very important for web projects whether you are implementing a plugin or a script. All these elements make each of these plugins very flexible. Everything that came out in 2014 is included in this list.

jQuery Image Sliders

Jssor Responsive Slider

I recently stumbled upon this functional jQuery slider and I was able to see for myself that it does the job very well. It contains limitless possibilities that can be extended with the slider's open source code:

  • Adaptive design;
  • Over 15 customization options;
  • More than 15 image changing effects;
  • Image gallery, carousels, full screen size support;
  • Vertical banner rotator, slide list;
  • Video support.

Demo | Download

PgwSlider - jQuery / Zepto based responsive slider

The sole purpose of this plugin is to show image slides. It's very compact, as jQuery files are only 2.5 KB, which makes it really fast to load:

  • Responsive layout;
  • SEO optimization;
  • Support for different browsers;
  • Simple image transitions;
  • The archive size is only 2.5 KB.

Demo | Download

jQuery Vertical News Slider

A flexible and useful jQuery slider designed for news resources with a list of publications on the left side and an image display on the right:

  • Adaptive design;
  • Vertical column switching news;
  • Extended headers.

Demo | Download

Wallop Slider

This slider does not contain jQuery , but I would like to present it as it is very compact and allows you to significantly reduce page load times. Let me know if you like it:

  • Responsive layout;
  • Simple design;
  • Various options for changing slides;
  • Minimum JavaScript code;
  • The size is only 3Kb.

Demo | Download

Flat style Polaroid gallery

With a flexible layout and beautiful design, the gallery in the style of documents scattered on the table should be of interest to many of you. More suitable for tablets and large displays:

  • Responsive slider;
  • Flat design;
  • Random slide change;
  • Full access to source code.

Demo | Download

A-Slider

Demo | Download

HiSlider - HTML5, jQuery and WordPress image slider

HiSlider has introduced a new free jQuery slider plugin with which you can create a variety of image galleries with fantastic transitions:

  • Responsive slider;
  • Does not require programming knowledge;
  • Several amazing templates and skins;
  • Beautiful transition effects;
  • Support for different platforms;
  • Compatible with WordPress, Joomla, Drupal;
  • Ability to display content different types: images, youtube video and Vimeo video;
  • Flexible setting;
  • Useful additional features;
  • Unlimited amount of displayed content.

Demo |Download

wow slider

WOW Slider is responsive jQuery slider images with amazing visual effects ( dominoes, rotate, blur, flip and flash, flyout, blinds) and professional templates.

WOW Slider comes with an installation wizard that allows you to create fantastic sliders in seconds without having to figure out the code and edit images. Also available for download are versions of the plugin for Joomla and WordPress:

  • Fully responsive;
  • Support for all browsers and all types of devices;
  • Support touch devices;
  • Easy installation on WordPress;
  • Flexibility in customization;
  • SEO-optimized.

Demo |Download

Nivo Slider - free jQuery plugin

Nivo Slider is known worldwide as the most beautiful and easy to use image slider. The Nivo Slider plugin is free and released under the MIT license:

  • Requires jQuery 1.7 and above;
  • Beautiful transition effects;
  • Simple and flexible to set up;
  • Compact and adaptive;
  • Open source;
  • Powerful and simple;
  • Several different templates;
  • Automatic image cropping.

Demo |Download

Simple jQuery slider with technical documentation

The idea was inspired by Apple's sliders, in which several small elements can fly out with various animation effects. The developers tried to implement this concept, taking into account minimum requirements to create a simple design for an online store, in which the "departing" elements represent various categories:

  • Responsive layout;
  • Minimalistic design;
  • Various dropout and slide transition effects.

Demo |Download

Full size jQuery image slider

A very simple slider that takes up 100% of the page width and adapts to the screen sizes of mobile devices. It works with CSS transitions, and images "stack" with anchors. The anchor can be replaced or removed if you don't want to link to the image.

When set, the slider expands to 100% of the screen width. Also it can automatically reduce the size of slide images:

  • Responsive jQuery slider
  • full size;
  • Minimalistic design.

Demo |Download

Elastic Content Slider + allowance

The Elastic Content Slider automatically adjusts the width and height based on the dimensions of the parent element. This is a simple jQuery slider. It consists of a slide area at the top, and a navigation tab bar at the bottom. The slider adjusts its width and height according to the size of its parent container.

When viewed on diagonally small screens, the navigation tabs turn into small icons:

  • Adaptive design;
  • Mouse click scrolling.

Demo |Download

Free 3D Stack Slider

An experimental slider that scrolls through images in 3D. Two stacks resemble stacks of paper, from which, when scrolling, images are displayed in the center of the slider:

  • Adaptive design;
  • Flip - transition;
  • 3D effects.

Demo |Download

Fullscreen Slit Slider based on jQuery and CSS3 + manual

In the tutorial, you will learn how to create a slider with a twist: the idea is to “cut” and display the current slide in this way, at the time when you open the next or previous image. Using jQuery and CSS animation, we can create unique transition effects:

  • Adaptive design;
  • Split transition;
  • Fullscreen slider.

Demo |Download

Unislider - a very small jQuery slider

No unnecessary bells and whistles and markup, the size is less than 3KB. Use any HTML code for your slides, extend it with CSS. Everything related to Unslider is hosted on GitHub:

  • Support for various browsers;
  • Keyboard support;
  • Height adjustment;
  • Adaptive design;
  • Support for touch input.

Demo | Download

Minimal Responsive Slides

Simple and compact plugin ( size is only 1 Kb) that creates a responsive slider using elements inside a container. ResponsiveSLides.js works with large quantity browsers, including all versions of IE from IE6 and up:

  • Fully responsive;
  • Size 1 KB;
  • CSS3 transitions that can be triggered via JavaScript;
  • Simple markup using a bulleted list;
  • Ability to customize transition effects and the duration of viewing one slide;
  • Supports the ability to create multiple slide shows;
  • Automatic and manual scrolling.

Demo |Download

Camera - free jQuery slider

Camera is a plugin with many transition effects, adaptive layout. Easy to set up, supported by mobile devices:

  • Fully responsive design;
  • signatures;
  • Possibility to add video;
  • 33 different colors of icons.

Demo |Download

SlidesJS, Responsive jQuery Plugin

SlidesJS is a responsive plugin for jQuery (1.7.1 and up) with support for touch devices and CSS3 transitions. Experiment with it, try some ready-made examples that will help you figure out how to add SlidesJS to your project:

  • Adaptive design;
  • CSS3 transitions;
  • Support for touch devices;
  • Easy to set up.

Demo | Download

BX Jquery Slider

This is a free responsive jQuery slider:

  • Fully responsive - adapts to any device;
  • Horizontal, vertical slide change;
  • Slides can contain images, videos, or HTML content;
  • Extended support for touch devices;
  • Using CSS transitions for slide animation ( hardware acceleration);
  • Callback APIs and fully public methods
  • Small file size;
  • Easy to implement.

Demo |Download

Flex Slider 2

The best responsive slider. A new version was finalized in order to increase the speed of work, compactness.

Demo | Download

Galleria - Responsive JavaScript Photo Gallery

Galleria is used by millions of websites to create high quality image galleries. The number of positive reviews about her work just rolls over:

  • Completely free;
  • Full screen view mode;
  • 100% adaptive;
  • No programming experience required;
  • Support for iPhone, iPad and other touch devices;
  • Flickr, Vimeo, YouTube and more;
  • Several themes.

Demo | Download

Blueberry - Simple Responsive jQuery Image Slider

I present to you a jQuery image slider written specifically for responsive web design. Blueberry is an experimental open source image slider plugin. source code, which was written specifically to work with responsive templates.

In this tutorial, we will create a simple adaptive page with a headline embellished with a carousel in which images slide from right to left. Our solution does not use JavaScript, the slideshow is based on CSS3 animations, which are supported by most modern browsers: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ and IE10.

Step 1 - Preparatory

We will need 4 large images (in our example we use 1200px x 390px). For the horizontal slider, we'll prepare a 4800px x 390px image in Photoshop, place all of our images one after the other horizontally, and save the result in a web-friendly format (“ slider-horizontal.jpg”).

Step 2 - HTML

We will actually be animating the background-position property for our header. The header itself has very simple markup:

L "ile de Batz

The full page code looks like this:

L "ile de Batz

Once upon a time…

Aenean lacinia bibendum ...

Links to learn by heart..



Step 3. CSS for mobile devices

We'll start defining styles for mobile devices. Let's set the base for the design, and then add template extensions for large screens. The text of the lesson contains only the main properties, the full code can be found in the source code:

Body ( width: 90%; min-width: 300px; max-width: 1200px; margin: 0 auto; padding-top: 1em; color: #504331 ) header ( text-align: center; position: relative; ) h1 ( font-size: 2.75em; background: white; display: inline-block; padding: 0 10px; margin-bottom: .25em; ) h1:after ( content: ""; height: 2px; display: block; position: absolute ; left: 0; right: 0; top: .5em; z-index: -1; border-top: 1px solid #504331; border-bottom: 1px solid #504331; ) .links ( background: url(../ images/map.png) bottom center no-repeat; padding-bottom: 177px; )

Step 4. Styles for large screens

On the big screens of the section .main and .screen should be displayed differently. Section .link will be 300px wide and positioned as the right sidebar, and the section .main stays on the left. We will also add a double line to separate the sections. We will determine the screen width greater than 1024px using the @media query:

@media only screen and (min-width: 1024px) ( .content ( position: relative; ) .main ( margin-right: 320px; padding: .5em 20px .5em 0; /*add a double line */ border-right : 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; ) .links ( position: absolute; right: 0; top: 0; width: 300px; text-align: right; ) )

Step 5 Responsive Header Images

Let's start working on the main part of our tutorial: a responsive CSS slider in the header. Let's get adaptive first. background image.

Header ( background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; )

With two percentage values ​​(400% for a property background-size and 32.5% for the bottom padding) the header background will display correctly regardless of the screen size.

Why 400%? We have 4 slides, so 1/4 of the background image in the header will be displayed. That is, the background size should be 4 times wider than the heading.

Why 32.5%? We position our background at the bottom of the header. The height of the background image is 390px, the width of the individual slide is 1200px, 390/1200 = 0.325, so the height is 32.5% of the width.

Step 6 Animation

We will animate the property background position. To display the second image property background position should matter 33.33333% bottom, third - 66.66667% bottom, and the fourth 100% bottom. The first image is displayed at the value of the property background position equal to 0 bottom or 133.33333% bottom(we set the repetitions to repeat x).

Each image has 25% of the "fame" time. The first is displayed from 0 to 25%, the second from 25% to 50%, the third from 50% to 75%, and the last from 75% to 100%. We set the transitions so that the image starts fading out a little earlier (using a value of 5%) before 25% of its rendering time has elapsed. This is what it looks like @keyframes:

@keyframes h_slide ( 0% ( background-position: 0% bottom; ) 20% ( background-position: 0% bottom; ) 25% ( background-position: 33.33333% bottom; ) 45% ( background-position: 33.33333% bottom ; ) 50% ( background-position: 66.66667% bottom; ) 70% ( background-position: 66.66667% bottom; ) 75% ( background-position: 100% bottom; ) 95% ( background-position: 100% bottom; ) 100% ( background-position: 133.33% bottom; ) )

Please note that you need to add browser prefixes: @-webkit-keyframes (for Chrome, Safari, iOS Safari, Android) and @-moz-keyframes (for Firefox 15).

Below is the complete header code. Our "h_slide" animation repeats every 24s (6s for each slide) in an endless loop. Time function matters ease-out, so that each slide slows down at the end of the transition.

Header ( text-align: center; position: relative; background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; -webkit- animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out infinite; animation: h_slide 24s ease-out infinite; )