"jQuery Slider Ref: "Gallery with slider" by Harut"
Bootstrap 3.3.0 Snippet by ashree

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="container"> </div> </body>
.hide-bullets { list-style:none; margin-left: -40px; margin-top:20px; } .thumbnail { padding: 0; } .carousel-inner>.item>img, .carousel-inner>.item>a>img { width: 100%; } .col-sm-3 a { border: 1px solid transparent; border-radius: 0; transition: all 3s ease; } .col-sm-3 a:hover { border: 1px solid #ff4647; border-radius: 100% 60% / 30% 10%; background: linear-gradient(rgba(56,123,131,0.7),rgba(56,123,131,0.7)); }
$(document).ready(function(){ var data = []; /* *getData method fetches data from mongo db and renders into gallery.hbs view * */ var getData = function(){ var obj = new Object( { 'id':'2', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/dragonflies(150x150).png', 'title': 'Dragon Flies', 'description': 'Dragon Flies', 'category': '', 'date': 'Tue Dec 06 2016 11:20:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'3', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/redsnowman(150x150).png', 'title': 'Christmas Decoration Snow Man', 'description': 'Very beutufull christmas decoration for your christmas tree, Red Snow Man', 'category': '', 'date': 'Tue Dec 06 2016 09:19:14 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'4', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/xdecoration(150x150).png', 'title': 'Christmas Decoration House', 'description': 'Beutifull christmas decoration for your home', 'category': '', 'date': 'Tue Dec 06 2016 09:19:56 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'5', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/butterflylantern(150x150).png', 'title': 'Lantern Butterfly Effect', 'description': 'Lantern Butterfly Effect', 'category': '', 'date': 'Tue Dec 06 2016 09:20:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'1', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/postBox(150x150).png', 'title': 'Post Box Galaxy Eye', 'description': 'Hand made in Ireland Stained Glass Post Box, The produsct name Galaxy Eye', 'category': '', 'date': 'Tue Dec 06 2016 09:49:58 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'6', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/moon-tree-lantern(150x150).png', 'title': 'Moon Tree Lantern', 'description': 'Moon Tree Lantern', 'category': '', 'date': 'Tue Dec 06 2016 10:20:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'7', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/decorationAngel1(150x150).png', 'title': 'Christmas Decoration Angel', 'description': 'Christmas Decoration Angel', 'category': '', 'date': 'Tue Dec 06 2016 13:20:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'8', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/christmas-tree(150x150).png', 'title': 'Christmas Decoration Christmas Tree', 'description': 'Christmas Tree', 'category': '', 'date': 'Tue Dec 06 2016 15:49:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'9', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/christmastree2(150x150).png', 'title': 'Christmas Decoration Christmas Tree', 'description': 'Christmas Tree', 'category': '', 'date': 'Tue Dec 06 2016 16:10:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'10', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/fishlantern(150x150).png', 'title': 'Lanter Fish on Drifted Wood', 'description': 'Fish Lantern on drifted Wood', 'category': '', 'date': 'Tue Dec 06 2016 16:57:18 GMT+0000 (GMT)' }); data.push(obj); var obj = new Object( { 'id':'11', 'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/lanternleafe(150x150).png', 'title': 'Lantern Leave', 'description': 'Lantern Leave Effect', 'category': '', 'date': 'Tue Dec 06 2016 16:57:18 GMT+0000 (GMT)' }); data.push(obj); }//end getData var check = function(param,callback, callback2){ if(!param.length){ if(callback && typeof(callback) === 'function'){ callback(); if(callback2 && typeof(callback2) === 'function'){ callback2(); } } } } var slider = function(){ $('.container').attr({'id':'slider-container'}); $('#slider-container').append($('<div/>',{'id':'main_area'})); $('#main_area').append($('<div/>',{'class':'row', 'id':'slider-row'})); $('#slider-row').append($('<div/>',{'class':'col-sm-6', 'id':'slider-thumbs'})); $('#slider-thumbs').append($('<ul/>',{'class':'hide-bullets'})); for(var x in data){ $('.hide-bullets').append($('<li/>',{'class':'col-sm-3','id':'li-'+x})); $('#li-'+x).append($('<a/>',{'class':'thumbnail', 'id':'carousel-selector-'+x})); $('#carousel-selector-'+x).append($('<img/>',{'src':data[x].path})); } $('#slider-row').append($('<div/>',{'class':'col-sm-6','id':'slider-big'})); $('#slider-big').append($('<div/>',{'class':'col-xs-12','id':'slider'})); $('#slider').append($('<div/>',{'class':'row','id':'row-big'})); $('#row-big').append($('<div/>',{'class':'col-sm-12','id':'carousel-bounding-box'})); $('#carousel-bounding-box').append($('<div/>',{'class':'carousel slide','id':'myCarousel'})); $('#myCarousel').append($('<div/>',{'class':'carousel-inner'})); for(var x in data){ var image = new Image(470, 480); var cut = data[x].path.length; image.src = data[x].path.substring(0,(cut - 13)); image.src = image.src + '(470x480).png'; $('.carousel-inner').append($('<div/>',{'class':'item', 'data-slide-number': x, 'id':'item-'+x})); $('#item-'+x).append(image); if(x == 0){ $('#item-'+x).attr({'class':'item active'}); } } };//end Slider /* *Call functions */ check(data,getData,slider); /* *This is original jquery method */ $('#myCarousel').carousel({ interval: 5000 }); //Handles the carousel thumbnails $('[id^=carousel-selector-]').click(function () { var id_selector = $(this).attr("id"); //console.log(id_selector); try { var id = /-(\d+)$/.exec(id_selector)[1]; //console.log(id_selector, id); jQuery('#myCarousel').carousel(parseInt(id)); } catch (e) { console.log('Regex failed!', e); } }); // When the carousel slides, auto update the text $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); });

Related: See More


Questions / Comments: