Responsive jQuery Thumbnail Image Carousel | Thumbnail Image Slider | Responsive Thumbnail Image Slider
Today we want to show you how to create a responsive image slider with a thumbnail carousel using jquery. we want to implement a responsive slider that adapts to the view-port width. The slider will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.
We’ll use the flixslider.js that will make it possible to navigate the images by “clicking” on the iPhone, desktop, mobile and iPad.
So, let’s do it!
For the HTML structure we’ll have a main wrapper with the id “flexiselDemo3 and li will contains image and its structure css.
Html
1 2 3 4 5 6 | <ul id="flexiselDemo3"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | #flexiselDemo1, #flexiselDemo2, #flexiselDemo3 { display:none; } .nbs-flexisel-container { position:relative; max-width:100%; } .nbs-flexisel-ul { position:relative; width:99999px; margin:0px; padding:0px; list-style-type:none; text-align:center; } .nbs-flexisel-inner { position: relative; overflow: hidden; float:left; width:100%; } .nbs-flexisel-item { float:left; margin:0px; padding:0px; cursor:pointer; position:relative; line-height:0px; background:none; border-radius:8px; box-shadow:none; transition:all 0.5s ease; } .nbs-flexisel-item img:hover {background:#fff;box-shadow:0px 0px 3px #ccc;} .nbs-flexisel-item img { max-width: 100%; cursor: pointer; padding:20px; position: relative; margin-top: 10px; margin-bottom: 10px; } /*** Navigation ***/ .nbs-flexisel-nav-left, .nbs-flexisel-nav-right { padding:2px 10px 0px 10px; border-radius:6px; -moz-border-radius:15px; -webkit-border-radius:15px; position: absolute; cursor: pointer; z-index: 4; top:40%; background:#fff; color: #fd3519; border:1px solid #adacac; } .nbs-flexisel-nav-left { left: 10px; } .nbs-flexisel-nav-left:before { content: "\f053"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } .nbs-flexisel-nav-left.disabled { opacity: 0.4; } .nbs-flexisel-nav-right { right: 5px; } .nbs-flexisel-nav-right:before { content: "\f054"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; } .nbs-flexisel-nav-right.disabled { opacity: 0.4; } |
JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.flexisel.js"></script> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo3").flexisel({ visibleItems: 4, itemsToScroll: 1, autoPlay: { enable: true, interval: 5000, pauseOnHover: true } }); }); </script> |
