HTML5 adaptive slider. How to make an adaptive slider on CSS3? Adaptive slider on CSS3

One of effective ways Attracting the attention of users on the site page is the creation of a moving animation. Animation elements help more clearly tell us and show users about your product. Last time, traveling panels were gaining great popularity, as well as a number of other effects that appear when scrolling or pressed into the picture. They are also known as sliders, carousels and leaving panels. This article discusses the creation of an adaptive carousel type slider, with a smooth effect of auto-contract.

Today, the network contains hundreds of reviews with references to ready-made solutions, however, most of them contain many unused functions that significantly reduce the performance of the slider, as well as slow down the site loading as a whole. Professional web developers always sought to create flexible in the setup software products, with a low threshold of additional libraries and plugins. That is why the work of our script involves minimum requirements for organizing such a slider. Work functionality allows you to set the switching interval, speed, as well as the selection of a specific slide. Below is a row of permanent, regulating the work of the slider itself.

timelist. - Slide Switching Speed

TimeView. - Time shown

RadioBut. - Buttons under the slide, for quick navigation. By default, True value, if using false, the buttons will disappear.

And now let's get started! Create and open the file index.htm.

In the submitted code, as we see nothing complicated, slider-Wrap. Determines general And lines the slider in the middle of the screen. Parameter active-Slide. Sets the size and height of the picture according to its length. AND slider. Shows only an active image.

Now create and open the file. style.css. and weeping the markup we need:

@import url ("https://fonts.googleapis.com/css?family\u003dopen+Sans|Roboto"); Body (Color: # 4F4F5A; font-face: "roboto", sans-serif; font-size: 16px; padding: 0; margin: 0;) # Slider-Wrap (max-width: 800px; margin: 0 auto; margin-top: 80px;) # Active-slide (width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- User-Select: none; -o-user-select: none; user-select: none;) #Slider (Position: relative; width: calc (100% * 4); top: 0; left: 0; margin: 0 ; padding: 0; -Webkit-Transition: 1s; -O-transition: 1s; Transition: 1s; -Webkit-Transition-Timing-Function: Ease-In-Out; -O-transition-Timing-Function: Ease-in -out; transition-timing-function: ease-in-out;) .slide (Width: Calc (100% / 4); list-style: none; display: inline; float: left;) .slide img (width: 100%;) .radio-button (margin-top: 10px; Text-Align: Center;) .Radio-But .ctrl-SELECT (Margin: 2px; Display: inline-block; Width: 16px; Height: 16px; Overflow : hidden; text-indent: -9999px; background: url (Radiobg.p NG) Center Bottom No-Repeat; ) .Radio-But .ctrl-Select: Hover (CURSOR: POINTER; Background-Position: Center Center;) .Radio-But .ctrl-select.ActiveVe (Background-position: Center Top;) #prewbutton, #NextButton (Display : block; width: 40px; Height: 100%; position: absolute; top: 0; overflow: hidden; text-indent: -999px; background: url ("arrowbg.png") Left Center No-Repeat; Opacity: 0.5 ; z-index: 3; Outline: none! Important;) #prewButton (Left: 10px;) #NextButton (Right: 10px; Background: URL (arrowbg.png) Right Center No-Repeat;) #prewbutton: Hover, # NextButton: Hover (Opacity: 1;)

In the style of style slider-Wrap. Propashite width. – maximum length Your pictures.

In the style of style #Slider (Width: Calc (100% * 4);) and .slide (Width: Calc (100% / 4);) Specify the number of pictures in your slider. In our example, they are 4.

If the arrows forward / back to the visibility of your slider can be made invisible and they will appear when you hover. To do this in parameters prewbut. and nextBut., Set the OPACITY property value 0.

Now create and open our file. slider.js.in which there will be a slider code. Do not forget to connect the jQuery library.

$ (Document) .ready \u003d 700; var timeview \u003d 5000; var RadioBut \u003d True; var slidenum \u003d 1; var slidetime; slidecount \u003d $ ("# Slider .Slide"). Length; Var Animslide \u003d function (arrow) (Cleartimeout (Slidetime); if (arrow \u003d\u003d "Next") (if (SlideNum \u003d\u003d Slidecount) (SlideNum \u003d 1;) ELSE (SlideNum ++) translatewidth \u003d - $ ("# Active-Slide") .width () * (SlideNum - 1); $ ("# Slider"). CSS (("transform": "translate (" + translatewidth + "px, 0)"));) Else if (arrow \u003d\u003d " prew ") (if (slidenum \u003d\u003d 1) (slider \u003d slidecount;) else (sliderum- \u003d 1) translatewidth \u003d - $ (" # Active-Slide "). width () * (SlideNUM - 1); $ (" #Slider "). CSS ((" transform ":" translate ("+ translatewidth +" px, 0) "));) Else (SlideNum \u003d arrow; translatewidth \u003d - $ (" # Active-Slide "). width ( ) * (SlideNum -1); $ ("# Slider"). CSS (("transform": "translate (" + translatewidth + "px, 0)"));) $ (". Ctrl-Select.Active" ) .RemoveClass ("Active"); $ (". Ctrl-Select"). EQ (SlideNum - 1) .addClass ("Active");) if (RadioBut) (VAR $ LinkArrow \u003d $ ("<>") .prependTo (" # Active-Slide "); $ (" # nextButton "). click (function (); Return False;)) $ (" # prewbutton "). Click (Function () (ANIMSLIDE ("PREW"); RETURN FALSE;))) var adderspan \u003d ""; $ (". Slide"). Each (FUNCTION (INDEX) (Adderspan + \u003d " "+ index +""; }); $("

"+ adderspan +"
") .appendto (" # Slider-Wrap "); $ (". Ctrl-Select: first "). AddClass (" Active "); $ (". Ctrl-Select "). Click (Function (Var Gotonum \u003d ParseFloat ($ (this) .text ()); AnimSlide (Gotonum + 1);)); var Pause \u003d False; var rotator \u003d function () (if (! Pause) (Slidetime \u003d SetTimeout (function () (AnimSlide ("Next")), timeview);)) $ ("# Slider-Wrap"). Hover (Function (); Pause \u003d True;), Function () (Pause \u003d False; Rotator () ;)); var clicking \u003d false; var prevx; $ (". Slide"). MOUSEDOWN (FUNCTION (E) (CLICKING \u003d TRUE; PREVX \u003d E.clientX;)); $ (". Slide"). MouseUp ( Function () (clicking \u003d false;)); $ (document) .mouseUp (function () (clicking \u003d false;)); $ (". Slide"). Mousemove (Function (E) (if (clicking \u003d\u003d True ) (if (E.ClientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > PrevX) (AnimSlide); Cleartimeout (Slidetime);) Clicking \u003d false; ))); $ (". Slide"). Hover (). CSS ("Cursor", "Pointer"); Rotator (); ));

Function animslide. Takes three types of values: NEXT, PREW, numeric value. The NEXT parameter switches the following slide, Prew returns the previous one, and the numeric value is a definitely specified slide selected through the radio slide buttons.

The presented slider used pictures from the web resource https://pixabay.com/.

If you need to add a high-quality jQuery-slider to your site, then in this article you will find a description of the necessary plugins. Despite the fact that JQuery has significantly simplified work with JavaScript. We still need plugins to speed up the process of creating a web design.

We can make changes to some of these plugins and create new sliders that much more answer the tasks of our site.

For other sliders, just add headlines, images and select the effects for changing the slides that come with a slider. All these plugins are accompanied by detailed documentationSo add new effects or functions to them will not be much difficulty. You can even change the triggers depending on the events, if you are an experienced jQuery programmer.

Recent trends, such as adaptive design, are very important for web projects, regardless of whether you implement a plugin or script. All these elements make each of these plugins very flexible. Everything that happened in 2014 is included in this list.

JQuery-sliders images

JSSOR RESPONSIVE SLIDER.

Recently, I came across this functional jQuery -Colder, and I could convince the first to make sure that he copes with his work very well. It contains unlimited possibilities that can be expanded at the expense of an open source code of the slider:

  • Adaptive design;
  • More than 15 settings;
  • More than 15 effects of image shift;
  • Gallery of images, carousel, support for full-screen size;
  • Vertical Rotator Banners, List of Slides;
  • Video support.

Demo | Download

PGWSlider - Adaptive JQuery / Zepto-based Slider

The only task of this plugin is to demonstrate slides of images. It is very compact, since the size of jQuery files is only 2.5 kb, which allows you to load it really quickly:

  • Adaptive layout;
  • SEO optimization;
  • Support with different browsers;
  • Simple image transitions;
  • The archive size is only 2.5 Kb.

Demo | Download

JQuery Vertical News Slider

Flexible and useful jQuery-Slider, designed for news resources with a list of publications on the left side and conclusion of the image on the right:

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

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 the time for downloading pages. Let me know if you like it:

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

Demo | Download

Flat-Style Polaroid Gallery

Gallery in the style of scattered on the table of documents with a flexible layout and beautiful design Must interest many of you. More suitable for tablets and large displays:

  • Adaptive slider;
  • Flat design;
  • Random change of slides;
  • Full access to the source code.

Demo | Download

A-slider.

Demo | Download

Hislider - HTML5, jQuery and WordPress Slider Image

Hislider introduced a new free jQuery slider plugin, with which you can create a variety of gallery images with fantastic transitions:

  • Adaptive slider;
  • Does not require knowledge of programming;
  • Several amazing templates and skins;
  • Beautiful transition effects;
  • Support for different platforms;
  • Compatibility with Wordpress, Joomla, Drupal;
  • The ability to display content of different types: images, YouTube videos and videa videa;
  • Flexible setting;
  • Useful additional functions;
  • Unlimited volume of displayed content.

Demo | Download

Wow Slider.

Wow Slider is adaptive jQuery slider Images with amazing visual effects (domino, turn, blur, coup and flash, departure, blinds) and professional templates.

WOW SLIDER comes with the installation wizard, which allows you to create fantastic sliders in a matter of seconds without the need to understand the code and edit images. Also available for downloading the version of the plug-in Joomla and WordPress:

  • Fully adaptive;
  • Support for all browsers and all types of devices;
  • Support for sensory devices;
  • Simple installation on WordPress;
  • Flexibility in the setup;
  • SEO-optimized.

Demo | Download

Nivo Slider - free jQuery-plugin

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

  • JQuery 1.7 and above;
  • Beautiful transition effects;
  • Simple and flexible in the setup;
  • Compact and adaptive;
  • Open code;
  • Powerful and simple;
  • Several different templates;
  • Automatic image trimming.

Demo | Download

Simple jQuery slider with technical documentation

The idea was inspired by Apple sliders in which several small elements can fly with different animation effects. Developers tried to embody this concept with regard to minimum requirements To create a simple design of the online store, in which the "departing" elements are different categories:

  • Adaptive layout;
  • Minimalistic design;
  • Various effects of loss and shifts of slides.

Demo | Download

Full-size jQuery image slider

A very simple slider that occupies 100% of the width of the page and adjusting to the size of the screens of mobile devices. It works with CSS transitions, and the images "fit" with the animals. Anchor can be replaced or deleted if you do not want to bind a link to the image.

When installing, the slider unfolds at 100% screen width. It can also automatically reduce the size of the slides images:

  • Adaptive jQuery -Slider;
  • Full-size;
  • Minimalistic design.

Demo | Download

ELASTIC CONTENT SLIDER + HAVE

Elastic Content Slidener automatically adjusts the width and height depending on the size of the parent element. This is a simple jQuery slider. It consists of a slide zone above, and the navigation tab panels at the bottom. The slider adjusts its width and height in accordance with the size of the parent container.

When viewing on the small screens diagonally, the navigation tabs are turned into small icons:

  • Adaptive design;
  • Scroll with a mouse click.

Demo | Download

Free 3D Stack Slider

Experimental slider, strolling images in 3D. Two stacks resemble paper stacks, from which when scrolling the image is displayed in the center of the slider:

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

Demo | Download

FullScreen Slit Slider based on jQuery and CSS3 + manual

From the manual, you will learn how to create a slider with a highlight: the idea is to "cut" and display the current slide in this form, while you open the following or previous image. Using jQuery and CSS - Animation, we can create unique transition effects:

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

Demo | Download

Unislider - very small jQuery slider

No unnecessary bellows and marking, size less than 3kb. Use any HTML code for your slides, expand it with using CSS. . All related to Unslider is located on GitHub:

  • Support for various browsers;
  • Keyboard support;
  • Adjustment in height;
  • Adaptive design;
  • Support for sensory input.

Demo | Download

Minimal Responsive Slides

Simple and compact plugin ( size of only 1 kb), which creates an adaptive slider using elements inside the container. ResponsiveSlides.js works S. large quantity browsers, including all versions of IE from IE6 and above:

  • Fully adaptive;
  • Size 1 KB;
  • CSS3 transitions with the possibility of startup via JavaScript;
  • Simple markup using a marked list;
  • Ability to configure the effects of transitions and a viewing duration of one slide;
  • Supports the ability to create several slideshows;
  • Automatic and hand scrolling.

Demo | Download

Camera - free jQuery slider

Camera is a plugin with a multitude of transition effects, an adaptive layout. Simple in the setup, supported by mobile devices:

  • Fully adaptive design;
  • Signatures;
  • The ability to add video;
  • 33 different colors icons.

Demo | Download

Slidesjs, adaptive jQuery plugin

Slidesjs is an adaptive plugin for jQuery (1.7.1 and above) with support for sensory devices and CSS3 transitions. Experiment with him, try multiple ready-made examples that will help you figure out how to add Slidesjs to your project:

  • Adaptive design;
  • CSS3 -Productions;
  • Support for sensory devices;
  • Simple in the setup.

Demo | Download

BX jQuery Slider.

This is a free adaptive jQuery slider:

  • Fully adaptive - adjusts to any device;
  • Horizontal, vertical change of slides;
  • Slides may contain images, video or HTML -Content;
  • Extended support for sensory devices;
  • Using CSS-transforms for slide animation ( hardware acceleration);
  • Callback api and fully public methods;
  • Small file size;
  • Easy to implement.

Demo | Download

FlexSlider 2.

The best adaptive slider. A new version It was finalized to increase the speed of work, compactness.

Demo | Download

Galleria - Adaptive Photo Gallery based on JavaScript

Galleria is used on millions of sites to create a gallery of images in high quality. The number of positive reviews about her work simply rolls:

  • Fully free;
  • Full-screen viewing mode;
  • 100% adaptive;
  • Not required programming experience;
  • Support iPhone, iPad and other touch devices;
  • Flickr, Vimeo, YouTube and much more;
  • Several topics.

Demo | Download

Blueberry - simple adaptive jQuery image slider

I present to you a jQuery-slider of images, written specifically for adaptive web design. BlueBerry is an experimental plugin of an open source image slider, which was written specifically to work with adaptive templates.

November 4, 2019 Recording has been updated

Yury German

Sliders at pure CSS + bonus slider

CSS sliders have some advantage over sliders on JavaScript. One of these advantages is the download speed. Not only are images for sliders are used. large sizes (If there is no optimization for different screens), it is also spent on downloading scripts for some time. But in the article you will see only sliders on pure CSS.

That's what I found on the site on the subject of sliders:

1. CSS3 image slider

Slider on CSS, which uses radio button slides to navigate. These radio pools are under sliders. Also, in addition to radio pools, navigation is performed using the shooter on the left and right. To keep track of what image is now displayed - pseudo-schools are used: Checked.

2. CSS3 Miniature Slider

Unlike the past slider on CSS, here instead of radio pools at the bottom are the thumbnails of all images, which is also convenient when creating the image gallery. Images are replaced with a kind of effect: smoothly disappear while increasing.

3. Gallery on CSS

But this slider on CSS is perfect for selling pages. As a rule, many web developers in the development of lending (selling pages) place a slider at the very beginning so that in the first screen (without scrolling), the visitor immediately saw all the benefits that it is on this page. In addition, this slider is adaptive, which also pleases.

4. Slider on CSS without links

Immediately I want to notice that this slider does not use links! By default, in addition to the main image (slide), 2 more slides are visible. They are located behind the main one. The change of slides occurs in beautiful mode: first the two slides are moved and the slide becomes the center, which will then become the main one. Then the slide increases and placed ahead of the rest.

5. Adaptive slider on CSS3

Another adaptive slider whose control is based on radiocopters. To see how this slider will look at different devicesah - You can either independently change the browser window, or on the slider page there are special icons of different devices, clicking on which you will see will look a slider on your computer, tablet or on a smartphone.

*** Bonus slider ***

In addition to all sliders, which are presented above, I want to please you with another one. This slider is perfect for creating the image gallery. Words do not explain what he does, so it's better to watch everything on the video:

Output

With the help of sliders, you can beautifully design image galleries by placing them more compactly, insert a slider in the first screen (part of the page that is visible without scrolling) selling a page to immediately show the visitors to the main benefits that he will receive. You can still find a lot of way where you can apply sliders, but one thing is clear exactly - they are beneficial with proper use.

Points that were reviewed in the article.

Hello everyone. Very cool slider I want to present to your attention. Ooo ... I look at you completely forgot about me. Yes, yes, I was already gone, probably for six months or a year and I absolutely do not know how to make himself lay out every day on the article (although it is completely real). Well, okay, not about this now speech. The slider is provided by Tympanus Codrops and works on HTML5, CSS3 and Tweenmax.js.

The slider is not spinning to the left right and not from top to bottom, but diagonally. Navigation arrows are located in the upper left corner and in the lower right. Also, navigation is carried out by pressing the prevni on the right and left. All animation is very smooth and works fine in all modern browsers. Each individual element of the slider has its own page that opens when presses. The page has a photo, title and text.

The slider is perfect for the gallery, the artist's portfolio, photographer, sculptor, in short, any person who is engaged in creative activities and he has the works he wants to show on the site. A gallery on the site of the museum, exhibition will look good.

Connecting the gallery

Connect the gallery will not be difficult

Download files

First you just need to download sources from my site for a direct link. From the archive you need to pour into the root of the site of the IMG, CSS and JS folder

Connect CSS and JS files

Then connect scripts and styles. Styles are connected by adding to tag next code

and scripts down the page to the closing tag

Add a slider to the site

First, add navigation to the top of the site

and then the slider itself

Memories & thoughts.
1

Automation

Random Roam
2

Machines.

Arbitrary Words.
3

COEXISTENCE

The Only Guide IS Your Heart

Haunted Drift.
4

Bellamio.

Fun Diverge
5

Pastures.

Hopes & Dreams.
6

Focus

1

Automation

A Tree Needs To Be Your Friend If You "RE GOING TO PAINT HIM

Just Let This Happen. We Just Let This Flow Right Out of Our Minds. JUST RELAX AND LET IT FLOW. That Easy. Let "S Put Some Happy Little Clouds in our World. IT" S a Very Cold Picture, I May Have to Go Get My Coat. It's about to freeze me to death. This Is Gonna Be a Happy Little Seascape. Let "S GO UP IN HERE, AND START HAVING SOME FUN THE LEAST LITTLE BIT CAN DO SO MUCH. WORK ONE THING AT A TIME. DON" T GET CARRIED AWAY - WE HAVE PLENTY OF TIME. Put Your Feelings Into It, Your Heart, IT "S Your World. These Trees Are SO Much Fun. I Get Started On Them and I Have a Hard Time Stopping.
2

Machines.

This Is Probably The Greatest Thing To Happen in My Life

WE "RE NOT TRYING TOACH YOU A THING TO COPY. WE" RE JUST HERE TOACH YOU A TECHNIQUE, THEN LET YOU LOOSE INTO THE WORLD. Now, We "Re Going to Fluff This Cloud. We don" T Have Anything But Happy Trees Here. Let "S Do That Again. Use What You See, don" T Plan IT. Let "S GO UP IN HERE, AND START HAVING SOME FUN THE LEAST LITTLE BIT CAN DO SO MUCH. WORK ONE THING AT A TIME. DON" T GET CARRIED AWAY - WE HAVE PLENTY OF TIME. Put Your Feelings Into It, Your Heart, IT "S Your World. These Trees Are SO Much Fun. I Get Started On Them and I Have a Hard Time Stopping.
3

COEXISTENCE

The Only Guide IS Your Heart

Let "S GO UP IN HERE, AND START HAVING SOME FUN THE LEAST LITTLE BIT CAN DO SO MUCH. WORK ONE THING AT A TIME. DON" T GET CARRIED AWAY - WE HAVE PLENTY OF TIME. Put Your Feelings Into It, Your Heart, It "S Your World. These Trees Are So Much Fun. I Get Started On Them and I Have a Hard Time Stopping. But We" Re Not There Yet, So WE DON "T Need To Worry About it. Now Let "S Put Some Happy Little Clouds in Here. What The Devil. A Thin Paint Will Stick to a Thick Paint. I "M GOING TO MIX UP A LITTLE COLOR.
4

Bellamio.

The Only Prerequisite Is That It Makes You Happy

See. WE Take The Corner of the Brush and Let It Play Back-and-Forth. This is unplanned it Really Just Happens. I "M Sort of A Softy, I Couldn" T SHOOT BAMBI EXCEPT WITH A CAMERA. I Guess I "M a Little Weird. I Like to Talk to Trees and Animals. That" S Okay Though; I Have more Fun Than Most People. WE "LL Play with Clouds Today. Didn" T You know you HAD THAT MUCH POWER? You can Move Mountains. You can do anything. Let "S GO UP IN HERE, AND START HAVING SOME FUN THE LEAST LITTLE BIT CAN DO SO MUCH. WORK ONE THING AT A TIME. DON" T GET CARRIED AWAY - WE HAVE PLENTY OF TIME. Put Your Feelings Into It, Your Heart, IT "S Your World. These Trees Are SO Much Fun. I Get Started On Them and I Have a Hard Time Stopping.
5

Pastures.

Let "S Go Up in Here Fun and Start Having Some Fun

SO OFTEN WE AVOID RUNNING WATER, AND RUNNING WATER IS A LOT OF FUN. Everyone Is Going to See Things Differently - And That "S The Way It Should Be. A BIG STRONG TREE NEEDS BIG STRONG ROOTS. STEVE Wants Reflections, So Let" S Give Him Reflections. WE DON "T COMMITED. WE ARE JUST PLAYING HERE. MAKING ALL THOSE LITTLE FLUFFIES THAT LIVE IN THE CLOUDS. LET" S GO UP IN HERE, AND START HAVING SOME FUN THE LEAST LITTLE BIT CAN DO SO MUCH. Work on One Thing At A Time. DON "T GET CARRIED AWAY - WE Have plenty of time. Put Your Feelings Into It, Your Heart, IT" s your world. These Trees Are SO Much Fun. I Get Started On Them and I Have a Hard Time Stopping.
6

Focus

This Is Unplanned It Really Just Happens

But We "Re Not There Yet, SO WE DON" T Need to Worry About It. Now Let "S Put Some Happy Little Clouds in Here. What the Devil. A Thin Paint Will Stick to a Thick Paint. I" M GOING TO MIX UP A LITTLE COLOR. WE'LL USE VAN DYKE BROWN, PERMANENT RED, AND A LITTLE BIT OF PRUSSIAN BLUE. Let "S GO UP IN HERE, AND START HAVING SOME FUN THE LEAST LITTLE BIT CAN DO SO MUCH. WORK ONE THING AT A TIME. DON" T GET CARRIED AWAY - WE HAVE PLENTY OF TIME. Put Your Feelings Into It, Your Heart, IT "S Your World. These Trees Are SO Much Fun. I Get Started On Them and I Have a Hard Time Stopping.

That's all. The slider is ready! Good luck in job

Greetings to you again on my blog. Today in CSS, thanks to the new selectors, there was an opportunity to make a slider without scripts. So, in this article, I will show you how to make an adaptive slider on CSS3?

Lesson plan

So today I will show you very detail how to create your own slider without scripts, adapt it to any devices and easily change its appearance in the future, as well as add new slides. We will make only 3 slides that will switch manually when clicking on the buttons. Well, let's start!

Marking slider

First of all, it is necessary to understand what the markup will be. In this screenshot you can see my example of marking, according to it and I will work today.
I also duplicate all this code so that you can copy and insert yourself.
First of all, you need to create slide switches buttons. Since the slide will be three, then the same needs the buttons:

Each receives its own, unique identifier, and one is selected by default.

The last piece of code that we need. It displays the signatures to the buttons, but in fact we use them in order to hide the default buttons (the radio buttons are not executed through the styles) and put these blocks that can be issued instead of them. It is they who will serve as switch buttons, and the bundle with the RADIO buttons is done through a special form attribute.

And now all this code needs to be wrapped in one common container. Let it be a block with a Wrap class.

We start creating a slider - the initial styles for the page

So, first, we will set common styles that will help reset all default indents, and at the same time to make the internal indents and frames taken into account in the width of the elements. This is done like this:

* {
margin: 0;
Padding: 0;
-Webkit-Box-Sizing: Border-Box;
-MOZ-BOX-SIZING: BORDER-BOX;
-O-Box-Sizing: Border-Box;
BOX-SIZING: BORDER-BOX;
}

By the way, * - means all selectors. That is, such a universal and global selector.

We decorate the container. It is the Block itself that contains all 3 of our important parts - buttons, slides and signatures.

Wrap (
HEIGHT: 350px;
Margin: 0 AUTO;
Position: relative;
width: 600px;
}

Width and height you can exhibit AnyoneDepending on what sizes will be your photos for slides. I cropped photos in advance to a size of 600 per 350 pixels, therefore I specify such dimensions. Margin: 0 Auto lines the container exactly in the center of the page, and relative positioning will allow you to accurately place the buttons in the container later.

We draw up slider and slides

Initially, here are such styles:

Slider (
Background-Color: # 999;
HEIGHT: INHERIT;
Overflow: Hidden;
Position: relative;
width: inherit;
}

We point the slider are the same width and height, as well as a common container. We also specify the color and positioning, and the Overflow property: Hidden cuts everything that does not fall into the block.

The next case must be issued the slides themselves:

Slides (
HEIGHT: INHERIT;
OPACITY: 0;
Position: Absolute;
width: inherit;
z-index: 0;
}
.Auto1 (background-image: url (bmw.jpg);)
.Auto2 (background-image: url (audi.jpg);)
.Auto3 (background-image: url (porshe.jpg);)

Also indicate the width and height like the slide. Inherit value allows you to inherit the value of the parent block. Using the properties of Z-index and Opacity, we will make our pictures invisible. Below we clearly prescribe background images.

So far we will see nothing, only a gray background, because our images are hidden.

We decorate the switch buttons

Now you need to remove standard radio buttons and stylize signatures instead.

Wrap\u003e Input (
Display: None;
}

We remove the radio buttons.

Wrap .control (
Position: Absolute;
margin-left: -50px;
Left: 50%;
}

With the help of these styles, we will center the block with the buttons in the center.

Wrap Label (
CURSOR: POINTER;
Display: inline-block;
Height: 25px;
margin: 10px;
Position: relative;
width: 25px;
Border: 2px Solid Gray;
Border Radius: 30% / 10px;
}

These styles make a very important thing - they allow us to issue buttons. You need to set the size of the buttons, set for them the block-lower case type, indents and gray frame. You can also add rounding corners.

Now we have three buttons centered below slides, it's just a gray frame. Let's make it so that when you click on the button in it, some image appeared, indicating that the button is active in this moment. By the way, the same technique, only with checkboxes, I show in this article.

Since we will switch the images of the car, I found a steering icon in the network, reduced it up to the size of about 20 to 20. Now the case is wise - add a background image to the button if it was clicked.

# Point1: Checked ~ .control Label: NTH-OF-TYPE (1),
# Point2: Checked ~ .control Label: NTH-OF-Type (2),
# Point3: Checked ~ .control Label: NTH-OF-TYPE (3) (
Background: URL (Wheel.png) NO-REPEAT 50% 50%;
}

This is done with such selectors. What are they doing? In essence, this is a complex selector, a whole condition is recorded in it. This is something similar to programming. It denotes the following: if the radio button is selected, then you need to apply the style to the signature that goes somewhere in the markup. Now when you click on the buttons, the image of the steering wheel appears inside!

The most important stage is forcing the switching!

In fact, we left to do quite a little bit. Namely, to make instead of the gray area in the slider appeared images with cars that would successfully moved away. To do this, you need to apply one more complex selectors:

# Point1: Checked ~ .slider\u003e .Auto1,
# Point2: Checked ~ .slider\u003e .Auto2,
# Point3: Checked ~ .slider\u003e .Auto3 (
OPACITY: 1;
z-index: 1;
}

What's happening? Now, if you try the slider in action, it will be completely worked. With these selectors, we specify the following: If the radio button is pressed, make the desired slide that lies somewhere on the HTML code (further radio buttons).

Thus, when clicking on the first button, it is shown to us a BMW car, when clicking on the second - Audi, when clicking on the third - PORSHE. And all this time when switching, the steering icon appears in that button, the slide is active.

So, we made a slider. It remains to adapt it.

We adapt the slider by viewing on mobile devices

While our slider has a fixed width of 600 pixels. Accordingly, problems will begin to occur on the screens less than this width. In particular, the horizontal scroll bar will appear. To avoid this, we have a little bit to adjust the written code. That's what you need to change:

  1. For the Wrap block, that is, the main container is not width, but Max-Width: 600px. This will allow the container to shrink if the window becomes smaller in width.
  2. Slider (Slider) It is necessary to register width: 100%;
  3. Slidesh (Slides) do not change anything.

Total changes can be seen in this code:

Wrap (
Max-width: 600px;
}
.slider (
width: 100%;
}

Great, now it remains to register a pair of media requests to make a slider fully adaptive, as well as scale images for new screens. Experimental by I found out that the slide picture starts not to fit on the screen at about the width of the window in 600 pixels. So, about this plot and you need to make a change in styles. To do this, write the first media request.

By the way, I wrote in detail about media queries and their application in this article. I advise you to familiarize yourself with it, who has no idea of \u200b\u200badaptive design.

Accordingly, to the width of 650 pixels and less everything was displayed well, I offer such a change in styles:

@Media Screen and (Max-Width: 650px) (
.wrap (
Max-width: 480px;
HEIGHT: 280px;
}
.slides (
Background-Size: Cover;
}
}

The width of the slider itself will decrease, the height will also decrease. For the slides themselves, we prescribed a property that scales images so that they keep their proportions completely placed in a slider without cutting at the same time.

Excellent, now you can check and make sure that with a width of less than 650 pixels, the slider is transformed and looks good, without cutting the picture.

The last point is the width of about 400 pixels. On it, our picture begins not to place and need to take action. To do this, I will write another media request:

@Media Screen and (Max-Width: 400px) (
.wrap (
Max-width: 320px;
HEIGHT: 180PX;
}
.slides (
Background-Size: Cover;
}
}

All the same, only re-reduce the width and height of the container. Excellent, now our slider is fully adaptive! Even on mobile phone With a width of 320 pixels, he will look great. However, see for yourself:

Thanks to media requests, the images are proportional to decrease, while maintaining their proportions.

Add slider effects when transitions

Well, a bonus in this article you can see a pair of effects that can be implemented when you hover on blocks. So, it is enough to choose any of them, and write it slides (.slides), and when an image appears, cancel the effect of the effect. To see the result, you need to set the slides of the TRANSITION property so that the transitions are smooth. Example effect:

Slides (
TRANSFORM: ROTATE (50DEG);
Transition: 1s;
}

Now a fairly selector, which makes the slide visible, to register the cancellation of the transformation:

# Point1: Checked ~ .slider\u003e .Auto1 (
TRANSFORM: NONE;
}

And so to do for all slides. Accordingly, initially the image will be rotated and will be invisible, and when it appears, the effect of a smooth return to initial position. Accordingly, you can come up with your effects. Well, we did a slider, I have it all. If you have questions, waiting in the comments.

Supplement - How to make it so that when you click on the slide, the transition tied to the slide link?

In other words, we are just pictures now, and how to make them clickable. To do this, you must have a ready slider on this lesson. Next, you need to find a piece in HTML code that is responsible for the slides. Here it is in the screenshot:

As you can see, I inserted inside the first and second slide link. So, when clicking on the first slide, a transition to Google will occur when clicking on the second - on Yandex. I want to note that the link will open in the same window, that is, the current page with the slider will disappear in this case. If you need to open links from slides in a new window, each tag You need to add attribute Target. \u003d "_blank".

But it's not all you need to do! Now it does not work yet so that the pictures have become clicked, you need to add to CSS that's what:

Slides A (
Display: Block;
width: 100%;
Height: 100%;
}

That is, for all the slides, we make a link to the block element, and point to it the width and height of 100% so that it occupies the entire space of the picture. Now everything should work, you can check. Just replace the addresses in the links and you can use. I hope I explained the most clearly as possible.

Raise of your attention: We all want to post their sites on a reliable hosting. I analyzed hundreds of hostings and found the best - HostiQ. In the network hundreds positive feedback About him, average user rating - 4.8 out of 5. Let your sites be fine.

Similar articles