{"id":4309,"date":"2015-05-28T03:31:16","date_gmt":"2015-05-28T03:31:16","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4309"},"modified":"2015-05-28T03:31:16","modified_gmt":"2015-05-28T03:31:16","slug":"create-a-responsive-image-slider-in-jquery-and-css3","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/create-a-responsive-image-slider-in-jquery-and-css3\/","title":{"rendered":"Create a Responsive Image Slider in jQuery and CSS3"},"content":{"rendered":"

STEP 1 \u2013 Markup<\/h2>\n

The slider html markup is very simple. We\u2019ll create a <div><\/em> with the class \u201cflex-container\u201d, then inside of this <div><\/em> we will add another one with the class \u201cflex-slider\u201d, in this div will be placed all the slider controls. To finish we will create an unordered list to add all the slides. Each slide needs to be inside of a list element.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n<\/td>\n
\n
\n
<<\/code>div<\/code> class<\/code>=<\/code>\"flex-container\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>div<\/code> class<\/code>=<\/code>\"flexslider\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>ul<\/code> class<\/code>=<\/code>\"slides\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>li<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>a<\/code> href<\/code>=<\/code>\"#\"<\/code>><<\/code>img<\/code> src<\/code>=<\/code>\"img\/slide1.jpg\"<\/code> \/><\/<\/code>a<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>li<\/code>><\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>li<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>img<\/code> src<\/code>=<\/code>\"img\/slide2.jpg\"<\/code> \/><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>li<\/code>><\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>li<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>img<\/code> src<\/code>=<\/code>\"img\/slide3.jpg\"<\/code> \/><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><<\/code>p<\/code>>Designing The Well-Tempered Web<\/<\/code>p<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>li<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>ul<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>div<\/code>><\/code><\/div>\n
<\/<\/code>div<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Next we\u2019ll include the jQuery<\/a> library and the FlexSlider<\/a> plugin. To load the slider include the following code, you can set the settings there too, for more setting visit the plugin website.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
<<\/code>script<\/code> src<\/code>=<\/code>\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"<\/code>><\/<\/code>script<\/code>><\/code><\/div>\n
<<\/code>script<\/code> src<\/code>=<\/code>\"js\/jquery.flexslider-min.js\"<\/code>><\/<\/code>script<\/code>><\/code><\/div>\n
<<\/code>script<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>$(document).ready(function () {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>$('.flexslider').flexslider({<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>animation: 'fade',<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>controlsContainer: '.flexslider'<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>});<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>});<\/code><\/div>\n
<\/<\/code>script<\/code>><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

STEP 2 \u2013 Basic Styles<\/h2>\n

First we will add some reset styles to clear all the margins, paddings, etc. and keep consistency trough all browsers.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n<\/td>\n
\n
\n
.flex-container a:active,<\/code><\/div>\n
.flexslider a:active,<\/code><\/div>\n
.flex-container a:focus,<\/code><\/div>\n
.flexslider a:focus\u00a0 { <\/code>outline<\/code>: <\/code>none<\/code>; }<\/code><\/div>\n
<\/div>\n
.slides,<\/code><\/div>\n
.flex-control-nav,<\/code><\/div>\n
.flex-direction-nav {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>padding<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>list-style<\/code>: <\/code>none<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flexslider a img { <\/code>outline<\/code>: <\/code>none<\/code>; <\/code>border<\/code>: <\/code>none<\/code>; }<\/code><\/div>\n
<\/div>\n
.flexslider {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>padding<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Then we will hide the slides to avoid jumping of the images during the page load. We will also set some styles for the images.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n<\/td>\n
\n
\n
.flexslider .slides > li {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>none<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-backface-<\/code>visibility<\/code>: <\/code>hidden<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flexslider .slides img {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>100%<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-border-radius: <\/code>2px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-border-radius: <\/code>2px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-radius: <\/code>2px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

To finish this step we will add some styles to clear the floats from the slides.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n<\/td>\n
\n
\n
.slides:after {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>content<\/code>: <\/code>\".\"<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>clear<\/code>: <\/code>both<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>visibility<\/code>: <\/code>hidden<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>line-height<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>height<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
html[xmlns] .slides { <\/code>display<\/code>: <\/code>block<\/code>; }<\/code><\/div>\n
* html .slides { <\/code>height<\/code>: <\/code>1%<\/code>; }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

STEP 3 \u2013 Container Styles<\/h2>\n

For the container we will set the background color to white and add a small shadow using the CSS3 property \u201cbox-shadow\u201d. Then we will add 10px padding and the rounded corners.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n<\/td>\n
\n
\n
.flexslider {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>relative<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>zoom: <\/code>1<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>padding<\/code>: <\/code>10px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background<\/code>: <\/code>#ffffff<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-border-radius: <\/code>3px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-border-radius: <\/code>3px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-radius: <\/code>3px<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-box-shadow: <\/code>0px<\/code> 1px<\/code> 1px<\/code> rgba(<\/code>0<\/code>,<\/code>0<\/code>,<\/code>0<\/code>, .<\/code>2<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-box-shadow: <\/code>0px<\/code> 1px<\/code> 1px<\/code> rgba(<\/code>0<\/code>,<\/code>0<\/code>,<\/code>0<\/code>, .<\/code>2<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>box-shadow: <\/code>0px<\/code> 1px<\/code> 1px<\/code> rgba(<\/code>0<\/code>,<\/code>0<\/code>,<\/code>0<\/code>, .<\/code>2<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

I\u2019ve set a minimum and maximum width for the slider. You may need to change it or remove when implementing on your project. We will set the zoom property to 1, this will avoid resizing on mobile browsers.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n<\/td>\n
\n
\n
.flex-container {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>min-width<\/code>: <\/code>150px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>max-width<\/code>: <\/code>960px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flexslider .slides { zoom: <\/code>1<\/code>; }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

STEP 4 \u2013 Next and Previous Arrows<\/h2>\n

For the next and previous buttons we will add a green CSS3 gradient, set the width and height, etc. To align the buttons vertically, we need to position them 50% from the top and add a negative margin, half of the button width.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n<\/td>\n
\n
\n
.flex-direction-nav a {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>-17px<\/code> 0<\/code> 0<\/code> 0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>35px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>height<\/code>: <\/code>35px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>top<\/code>: <\/code>50%<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>cursor<\/code>: <\/code>pointer<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>text-indent<\/code>: <\/code>-9999px<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-color<\/code>: <\/code>#82d344<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -webkit-gradient(linear, <\/code>left<\/code> top<\/code>, <\/code>left<\/code> bottom<\/code>, from(<\/code>#82d344<\/code>), to(<\/code>#51af34<\/code>));<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -webkit-linear-gradient(<\/code>top<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -moz-linear-gradient(<\/code>top<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -o-linear-gradient(<\/code>top<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: linear-gradient(to <\/code>bottom<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

The arrows will be added using the \u201c:before\u201d<\/em> pseudo-selector. This pseudo selector allows us to include some content without adding a new tag in the html. To create that ribbon effect we will use a border trick to easily create shapes using only CSS, this shapes will also be included using a pseudo-selector, \u201c:after\u201d<\/em>.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n<\/td>\n
\n
\n
.flex-direction-nav a:before {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>content<\/code>: <\/code>''<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>9px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>height<\/code>: <\/code>13px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>top<\/code>: <\/code>11px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>left<\/code>: <\/code>11px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background<\/code>: <\/code>url<\/code>(..\/img\/arrows.png) <\/code>no-repeat<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-direction-nav a:after {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>content<\/code>: <\/code>''<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>height<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>top<\/code>: <\/code>35px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

To finish the buttons will add the rounded corners, position them to right and left and add the \u201ctriangles\u201d that will make the ribbon effect.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n
24<\/div>\n
25<\/div>\n
26<\/div>\n
27<\/div>\n
28<\/div>\n
29<\/div>\n
30<\/div>\n<\/td>\n
\n
\n
.flex-direction-nav .flex-next {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>right<\/code>: <\/code>-5px<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-border-radius: <\/code>3px<\/code> 0<\/code> 0<\/code> 3px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-border-radius: <\/code>3px<\/code> 0<\/code> 0<\/code> 3px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-radius: <\/code>3px<\/code> 0<\/code> 0<\/code> 3px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-direction-nav .flex-prev {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>left<\/code>: <\/code>-5px<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-border-radius: <\/code>0<\/code> 3px<\/code> 3px<\/code> 0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-border-radius: <\/code>0<\/code> 3px<\/code> 3px<\/code> 0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-radius: <\/code>0<\/code> 3px<\/code> 3px<\/code> 0<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-direction-nav .flex-next:before { <\/code>background-position<\/code>: <\/code>-9px<\/code> 0<\/code>; <\/code>left<\/code>: <\/code>15px<\/code>; }<\/code><\/div>\n
.flex-direction-nav .flex-prev:before { <\/code>background-position<\/code>: <\/code>0<\/code> 0<\/code>; }<\/code><\/div>\n
<\/div>\n
.flex-direction-nav .flex-next:after {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>right<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-bottom<\/code>: <\/code>5px<\/code> solid<\/code> transparent<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-left<\/code>: <\/code>5px<\/code> solid<\/code> #31611e<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-direction-nav .flex-prev:after {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>left<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-bottom<\/code>: <\/code>5px<\/code> solid<\/code> transparent<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-right<\/code>: <\/code>5px<\/code> solid<\/code> #31611e<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

STEP 5 \u2013 Slider Controls<\/h2>\n

The slider controls are the little circles at the end of the slider that allows you to click on a slide. We\u2019ll position this container at the bottom of the slider. Then we will create the circles using the \u201cborder-radius\u201d and \u201cbox-shadow\u201d property. For the active slide circle we will remove the box shadow and add the same CSS3 gradient that we used on the buttons.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n
24<\/div>\n
25<\/div>\n
26<\/div>\n
27<\/div>\n
28<\/div>\n
29<\/div>\n
30<\/div>\n
31<\/div>\n
32<\/div>\n
33<\/div>\n
34<\/div>\n
35<\/div>\n
36<\/div>\n
37<\/div>\n
38<\/div>\n
39<\/div>\n
40<\/div>\n
41<\/div>\n
42<\/div>\n
43<\/div>\n<\/td>\n
\n
\n
.flexslider .flex-control-nav {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>100%<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>bottom<\/code>: <\/code>-40px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>text-align<\/code>: <\/code>center<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>0<\/code> 0<\/code> 0<\/code> -10px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-control-nav li {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: inline-<\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>zoom: <\/code>1<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-control-paging li a {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>cursor<\/code>: <\/code>pointer<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>text-indent<\/code>: <\/code>-9999px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>12px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>height<\/code>: <\/code>12px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>0<\/code> 3px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-color<\/code>: <\/code>#b6b6b6<\/code> \\<\/code>9<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-border-radius: <\/code>12px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-border-radius: <\/code>12px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-radius: <\/code>12px<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-box-shadow: <\/code>inset<\/code> 0<\/code> 0<\/code> 0<\/code> 2px<\/code> #b6b6b6<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-box-shadow: <\/code>inset<\/code> 0<\/code> 0<\/code> 0<\/code> 2px<\/code> #b6b6b6<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>box-shadow: <\/code>inset<\/code> 0<\/code> 0<\/code> 0<\/code> 2px<\/code> #b6b6b6<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
.flex-control-paging li a.flex-active {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-color<\/code>: <\/code>#82d344<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -webkit-gradient(linear, <\/code>left<\/code> top<\/code>, <\/code>left<\/code> bottom<\/code>, from(<\/code>#82d344<\/code>), to(<\/code>#51af34<\/code>));<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -webkit-linear-gradient(<\/code>top<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -moz-linear-gradient(<\/code>top<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: -o-linear-gradient(<\/code>top<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-image<\/code>: linear-gradient(to <\/code>bottom<\/code>, <\/code>#82d344<\/code>, <\/code>#51af34<\/code>);<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-box-shadow: <\/code>none<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-box-shadow: <\/code>none<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>box-shadow: <\/code>none<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

STEP 6 \u2013 Captions<\/h2>\n

We\u2019re almost there, let just add some simple styles for the captions. Set the background color to black with a little bit of transparency using the rgba color mode. Then we will position it at the bottom of the slides.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n<\/td>\n
\n
\n
.flexslider .slides p {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>display<\/code>: <\/code>block<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>absolute<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>left<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>bottom<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>padding<\/code>: <\/code>0<\/code> 5px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>font-family<\/code>: <\/code>Helvetica<\/code>, <\/code>Arial<\/code>, <\/code>sans-serif<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>font-size<\/code>: <\/code>12px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>font-weight<\/code>: <\/code>bold<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>text-transform<\/code>: <\/code>uppercase<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>line-height<\/code>: <\/code>20px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>color<\/code>: <\/code>white<\/code>;<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background-color<\/code>: <\/code>#222222<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>background<\/code>: rgba(<\/code>0<\/code>,<\/code>0<\/code>,<\/code>0<\/code>, .<\/code>9<\/code>);<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-webkit-border-radius: <\/code>2px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>-moz-border-radius: <\/code>2px<\/code>;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>border-radius: <\/code>2px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Conclusion<\/h3>\n

This is the end of this tutorial. I hope you find it useful and have learned something new from it. Feel free to use this slider on your next project or personal website. Don\u2019t forget to follow us for more articles, tutorials and quality resources. Enjoy!<\/p>\n

\"Preview\"<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

STEP 1 \u2013 Markup The slider html markup is very simple. We\u2019ll create a <div> with the class \u201cflex-container\u201d, then inside of this <div> we will add another one with the class \u201cflex-slider\u201d, in this div will be placed all the slider controls. To finish we will create an unordered list to add all the […]<\/p>\n","protected":false},"author":1,"featured_media":4308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[5,6],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4309"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4309"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4309\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4308"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}