Asked  7 Months ago    Answers:  5   Viewed   275 times

This is the effect I'm trying to achieve with Bootstrap 3 carousel

enter image description here

Instead of just showing one frame at a time, it displays N frames slide by side. Then when you slide (or when it auto slides), it shifts the group of slides like it does.

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin...

 Answers

36

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin

As of 2013-12-08 the answer is no. The effect you are looking for is not possible using Bootstrap 3's generic carousel plugin. However, here's a simple jQuery plugin that seems to do exactly what you want http://sorgalla.com/jcarousel/

Tuesday, June 1, 2021
 
Anand
answered 7 Months ago
42

You can display one carousel item at a time, but fill it with multiple elements. Something like:

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

But you may then be wishing you could advance them one at a time. That isn't going to happen with bootstrap right out of the box. After implementing many carousels, I'd recommend seeking another carousel library when Bootstrap's doesn't fit the bill. Slick.js is my go-to lib for lots of carousel config options. And its a fairly slim ~5k min'd and gzipped.

If you're hard-set on using bootstrap, here is a script that can provide single advance, multi-items: http://codepen.io/MarkitDigital/pen/ZpEByz

Wednesday, July 28, 2021
 
Troncoso
answered 5 Months ago
16

Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically. Else then that javascript code in either message or msg is done by me to dynamically generate everything so that if you have stored everything in database you just have to create a similar json there and parse it here and you are done. Adding and deleting images,country will also be easy will also be easy.

var countryjson={
			
			list : [
				{
					name    : 'Iceland',
					img_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',
					otherimages : [
						{
							image_path : 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Eyjafjallaj%C3%B6kull.jpeg',
							image_title: 'Title goes here.',
							image_caption : 'This is 1st image of iceland and this is its caption',
						},
						{
							image_path : 'http://www.icelandprocruises.co.uk/media/img/gallery/home/0002-gallery-iceland-waterfall-1.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 2nd image of iceland and this is its caption',
						},
						{
							image_path : 'http://querzy.com/wp-content/uploads/2016/06/iceland.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 3rd image of iceland and this is its caption',
						}
					]
				},
				{
					name    : 'Brazil',
					img_path : 'https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg',
					otherimages : [
						{
							image_path : 'https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/16674/SITours/private-sugar-loaf-and-christ-the-redeemer-tour-in-rio-de-janeiro-278478.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 1st image of iceland and this is its caption',
						},
						{
							image_path : 'http://www.sportiputovanja.hr/wp-content/uploads/2016/12/RIO-BEACH.jpg',
							image_title: 'Title goes here.',
							image_caption : 'This is 2nd image of iceland and this is its caption',
						},
						{
							image_path : 'http://riotimesonline.com/wp-content/uploads/2014/01/Fernando-Maia-Riotur.png',
							image_title: 'Title goes here.',
							image_caption : 'This is 3rd image of iceland and this is its caption',
						}
					]
				}
			]
			
			
			
		}
		
		
		function loadCountries()
		{
		
			for(i=0;i<countryjson.list.length;i++)
			{
				var countrybean=countryjson.list[i];
				
				var msg='';
				msg+='<div class="col-sm-3">';
				msg+='	<div class="panel panel-default" onclick="showModal('+i+')">';
				msg+='		<div class="panel-body">';
				msg+='			<img src="'+countrybean.img_path+'" class="adjust-img" alt="'+countrybean.name+' Image">';
				msg+='		</div>';
				msg+='		<div class="panel-footer" align="center">'+countrybean.name+'</div>';
				msg+='	</div>';
				msg+='</div>';
				
				$('#country_list').append(msg);
				
			}
		}
		
		
		function showModal(country_id){
		
			BootstrapDialog.show({
				title: 'Other images of '+countryjson.list[country_id].name,
				message: function(dialog) {
					
					var message ='';
					var ol_list='';
					var image_list='';
					var corosol_id='myCarousel_'+country_id;
					
					
					var countrybean=countryjson.list[country_id];
					
					for(i=0;i<countrybean.otherimages.length;i++)
					{
						var imagebean=countrybean.otherimages[i];
						ol_list+='<li data-target="#'+corosol_id+'" data-slide-to="'+i+'" '+ (i==0?'class="active"':'') +'></li>';
						image_list+='<div class="item '+ (i==0?'active':'') +'">';
						image_list+='	<img src="'+imagebean.image_path+'" alt="'+imagebean.image_title+'" >';
						image_list+='	<div class="carousel-caption">';
						image_list+='		<h3>'+imagebean.image_title+'</h3>';
						image_list+='		<p>'+imagebean.image_caption+'</p>';
						image_list+='	</div>';
						image_list+='</div>';
					}
					
					message+='<div id="'+corosol_id+'" class="carousel slide" data-ride="carousel">';
					message+='	<!-- Indicators -->';
					message+='	<ol class="carousel-indicators">'+ol_list+'</ol>';
					
					message+='	<!-- Wrapper for slides -->';
					message+='	<div class="carousel-inner" role="listbox">'+image_list+'</div>';
					
					message+='	<!-- Left and right controls -->';
					message+='	<a class="left carousel-control" href="#'+corosol_id+'" role="button" data-slide="prev">';
					message+='		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>';
					message+='		<span class="sr-only">Previous</span>';
					message+='	</a>';
					message+='	<a class="right carousel-control" href="#'+corosol_id+'" role="button" data-slide="next">';
					message+='		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>';
					message+='		<span class="sr-only">Next</span>';
					message+='	</a>';
					message+='</div>';
					
					return message;
				}
			});
		
		}
		
		
		$(document).ready(function(){
			loadCountries();
		});
.adjust-img
		{
			width : 100%;
			height : 300px;
		}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>


<div class="container-fluid">
		<div clas="rows" id="country_list">
		</div>
	</div>
Saturday, August 7, 2021
 
Jakob Gade
answered 4 Months ago
65

You have two carousels with id #myCarousel.

One of these should be changed to a different id (#carousel2, for instance). Then the associated controls should be updated to have href="#carousel2"

In general, you should only ever use an ID once per page.

Friday, September 17, 2021
 
Mashhadi
answered 3 Months ago
61

To disable dates, use datesDisabled method to provide an array.

Some dates are disabled in this CodePen.

$("#picker").datepicker({
    datesDisabled:["11/24/2016","11/28/2016","12/02/2016","12/23/2016"]
});



EDIT

Previous answer was for Bootstap DatePicker...
Sorry for the misreading, my bad.

Here is what I have found for Bootstrap DateRangePicker:

// Define the disabled date array
var disabledArr = ["11/24/2016","11/28/2016","12/02/2016","12/23/2016"];

$("#picker").daterangepicker({

     isInvalidDate: function(arg){
         console.log(arg);

         // Prepare the date comparision
         var thisMonth = arg._d.getMonth()+1;   // Months are 0 based
         if (thisMonth<10){
             thisMonth = "0"+thisMonth; // Leading 0
         }
         var thisDate = arg._d.getDate();
         if (thisDate<10){
             thisDate = "0"+thisDate; // Leading 0
         }
         var thisYear = arg._d.getYear()+1900;   // Years are 1900 based

         var thisCompare = thisMonth +"/"+ thisDate +"/"+ thisYear;
         console.log(thisCompare);

         if($.inArray(thisCompare,disabledArr)!=-1){
             console.log("      ^--------- DATE FOUND HERE");
             return true;
         }
     }

}).focus();

This is working in this CodePen.



EDIT for the bonus question in comments ;)

Above, is to draw the calendar with disabled dates.
Now, what you need is to compare the selected range again, on Apply (when user has selected a range), to disallow a range that would include some disabled dates.

So here is an additional function:

$("#picker").on("apply.daterangepicker",function(e,picker){

    // Get the selected bound dates.
    var startDate = picker.startDate.format('MM/DD/YYYY')
    var endDate = picker.endDate.format('MM/DD/YYYY')
    console.log(startDate+" to "+endDate);

    // Compare the dates again.
    var clearInput = false;
    for(i=0;i<disabledArr.length;i++){
        if(startDate<disabledArr[i] && endDate>disabledArr[i]){
            console.log("Found a disabled Date in selection!");
            clearInput = true;
        }
    }

    // If a disabled date is in between the bounds, clear the range.
    if(clearInput){

        // To clear selected range (on the calendar).
        var today = new Date();
        $(this).data('daterangepicker').setStartDate(today);
        $(this).data('daterangepicker').setEndDate(today);

        // To clear input field and keep calendar opened.
        $(this).val("").focus();
        console.log("Cleared the input field...");

        // Alert user!
        alert("Your range selection includes disabled dates!");
    }
});

See the improved CodePen here.

Sunday, October 17, 2021
 
erotsppa
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share