Posted By admin
News Carousel
Demo

Hi,,Please anyone knows how to add multiple “news Carousel” sliders to a web page. This example is not seems working for multiple usage. How can I update this code for multiple usage.,Please help???,in order to solve it just replace the css class #myCarousel .list-group .active with #myCarousel .list-group-item .active,and then edit the 1st js function with the next function,$(document).ready(function () {, var clickEvent = false;, var count = 0;, var co = $(‘#myCarousel’).children();, count = co[0].childElementCount – 1;, $(‘#myCarousel’).carousel({, interval: 4000, }).on(‘click’, ‘.list-group li’, function () {, clickEvent = true;, $(‘.list-group li’).removeClass(‘active’);, $(this).addClass(‘active’);, }).on(‘slid.bs.carousel’, function (e) {, if (!clickEvent) {, var current = $(‘.list-group li.active’);, var current1 = $(‘.list-group-item lactive’);, current.removeClass(‘active’).next().addClass(‘active’);, current1.removeClass(‘active’).next().addClass(‘active’);, var id = parseInt(current.data(‘slide-to’));, if (count == id) {, $(‘.list-group li’).first().addClass(‘active’);, console.log($(‘.list-group li’).first());, }, if (count == id) {, $(‘.list-group-item’).first().addClass(‘active’);, }, }, clickEvent = false;, });,}),If I want to use bigger sized pictures, what does this imply concerning the code ? The inconvenience seems to be that the text covers a part of the image. And : How do I put the text below the image ? (I must admit that I am a newbie. Concerning the pictures I have some which are in portrait, other in landscape format – seems to be quite difficult to fit them together … – Would even say in this sample portrait sized pictures would be even more convenient … ),How can this made to hover when you move ur mouse instead of click,The sliding works perfect, but no matter which button I’m pressing the first one (Lorem ipsum) keeps being selected. What do I need to do?,Change the trigger box resizing to a function and call it on load and resize. Works well for me.,$(window).resize(function() { setTriggerHeight(); }); $(window).load(function() { setTriggerHeight(); }); function setTriggerHeight() { var boxheight = $(‘#myCarousel .carousel-inner’).innerHeight(); var itemlength = $(‘#myCarousel .item’).length; var triggerheight = Math.round(boxheight/itemlength+1); $(‘#myCarousel .list-group-item’).outerHeight(triggerheight); },This resolved the resizing issue for me in Chrome, Firefox, and Safari for Mac. Thanks.,In the JSvar triggerheight = Math.round(boxheight/itemlength+1); replace var triggerheight = Math.round(boxheight/itemlength+81);,thank you it’s sooooooooooooooo great,Here is the fix:http://bootsnipp.com/snippe…Move the code that change the items height to a window.load function.If there is another way to do that, please tell me.,This thing is still broken, does anybody at bootsnipp care?,still broken,I don’t think anybody cares. I would love to use this and have spent some time trying to fix it to no avail. It needs to be removed if it doesn’t work,It’s broken,Doesn’t work on Safari or Firefox. List items are scrunched together. Refreshing does not help,Sometimes it needs a page refresh for some reason… try doing that and seeing it again.,This is cool but it doesn’t work at all in Safari and doesn’t work consistently in Chrome/Firefox. It’s even broken on the bootsnipp page for me with Safari.,Beautiful carousel but I’m having some problems as well. . .,Not sure if I’m experiencing the same issue but sometimes when it loads the list box items are all scrunched together. Sometimes a refresh fixes but sometimes not, it’s very inconstant.,Has anyone found a fix for this issue?,Great Job!,I’ll definitely be using this!,Thanks,Dude, That is amazing well done!,awesome,The author is sevenx.de

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *