Multi-Column Responsive Carousel

Developer
Adam Grayson
Size
5,686 Kb
Views
12,144
  1. Multi-Column Responsive Carousel Previews
  2. Multi-Column Responsive Carousel HTML Codes
  3. Multi-Column Responsive Carousel CSS Codes
  4. Multi-Column Responsive Carousel JS Codes

How do I make an multi-column responsive carousel?

Carousel that gets different amounts of columns based on screen size. What is a multi-column responsive carousel? How do you make a multi-column responsive carousel? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Multi-Column Responsive Carousel Previews
IQ Test

Multi-Column Responsive Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-Column Responsive Carousel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="our-team"> <h4>Our Team</h4> <h6>Lorem Ipsum Whatever, Bears.</h6> <div class="multi-column-carousel"> <div class="pagination-container"></div> <div class="viewport"> <div class="multi-column-button previous hidden"></div> <div class="multi-column-button next"></div> <div class="page-container"> <div class="page active"> <div class="page-content"> <div class="head-shot"><img src="http://www.finerminds.com/wp-content/uploads/2012/05/LittleBear.jpg"/></div> <h6>Employee Number 1</h6> <p>CEO / Bear</p> </div> </div> <div class="page"> <div class="page-content"> <div class="head-shot"><img src="https://s-media-cache-ak0.pinimg.com/236x/27/a9/fd/27a9fdffba6ed78a29c67b82368129cc.jpg"/></div> <h6>Employee Number 2</h6> <p>Strategist / Bear</p> </div> </div> <div class="page"> <div class="page-content"> <div class="head-shot"><img src="http://hdwallpaperbook.com/wp-content/gallery/images-of-baby-bears/thumbs/thumbs_funny+Baby-Bear+bear+facts+bear+attacks+bear+species+bears+of+USA+Bears+Australia+bears+Canada+bears+France+bears+Europe+bears+beautiful+amazing+animal+attacks+news+picture.jpg"/></div> <h6>Employee Number 3</h6> <p>Account Director / Bear</p> </div> </div> <div class="page"> <div class="page-content"> <div class="head-shot"><img src="http://www.bcmountainlodge.com/media2/images/square_180/bears/sow-cubs-salmonlunch1.jpg"/></div> <h6>Employee Number 4</h6> <p>Chef / Bear</p> </div> </div> <div class="page"> <div class="page-content"> <div class="head-shot"><img src="http://frontierscientists.com/wp-content/uploads/2015/06/BearsGrizzlies_ProjectSquareRester-180x180.jpg"/></div> <h6>Employee Number 5</h6> <p>Project Manager / Bear</p> </div> </div> <div class="page"> <div class="page-content"> <div class="head-shot"><img src="http://thegamecase.com/wp-content/uploads/2015/09/bears-180x180.jpg"/></div> <h6>Employee Number 6</h6> <p>Designer / Developer / Bear</p> </div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multi-Column Responsive Carousel - Script Codes CSS Codes

* { box-sizing: border-box;
}
html, body { font-family: 'TrebuchetMS', trebuchet, sans-serif;
}
h4 { font-size: 31px; line-height: 38px; text-align: center;
}
h6 { font-size: 20px; line-height: 26px; text-align: center;
}
p { font-size: 16px; line-height: 24px;
}
.multi-column-carousel { width: 100%; position: relative;
}
.multi-column-carousel .pagination-container { left: 50%; z-index: 1; bottom: -18px; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.multi-column-carousel .pagination-container:after { content: ''; clear: both; display: block;
}
.multi-column-carousel .pagination-container .indicator { float: left; width: 10px; height: 10px; margin: 0 4px; cursor: pointer; border-radius: 50%; -webkit-transition: 0.3s border; transition: 0.3s border; border: 1px solid black;
}
.multi-column-carousel .pagination-container .indicator:first-child { margin-left: 0;
}
.multi-column-carousel .pagination-container .indicator:last-child { margin-right: 0;
}
.multi-column-carousel .pagination-container .indicator.active { border: 5px solid black;
}
.multi-column-carousel .viewport { width: 100%; overflow: hidden; position: relative;
}
.multi-column-carousel .viewport .multi-column-button { top: 50%; z-index: 1; width: 44px; height: 44px; opacity: 0.5; cursor: pointer; border-radius: 50%; position: absolute; -webkit-transition: 0.1s all; transition: 0.1s all; background-color: lightgray; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.multi-column-carousel .viewport .multi-column-button.previous { left: 8px;
}
.multi-column-carousel .viewport .multi-column-button.previous.hidden { left: -45px;
}
.multi-column-carousel .viewport .multi-column-button.next { right: 8px;
}
.multi-column-carousel .viewport .multi-column-button.next.hidden { right: -45px;
}
.multi-column-carousel .viewport .multi-column-button:hover { opacity: 1;
}
.multi-column-carousel .viewport .page-container { left: 0; position: relative;
}
.multi-column-carousel .viewport .page-container:after { content: ''; clear: both; display: block;
}
.multi-column-carousel .viewport .page-container .page { float: left;
}
.multi-column-carousel .viewport .page-container .page .page-content { padding: 30px;
}
.our-team { padding: 60px 0;
}
.our-team .multi-column-carousel { margin-top: 30px;
}
.our-team .multi-column-carousel .page-content { text-align: center;
}
.our-team .multi-column-carousel .page-content .head-shot { width: 180px; height: 180px; overflow: hidden; border-radius: 50%; margin: 0 auto 60px; background-color: goldenrod;
}

Multi-Column Responsive Carousel - Script Codes JS Codes

$(document).ready(function () {	var meetTheTeamCarousel = new MultiColumnCarousel();	meetTheTeamCarousel.init();
});
var MultiColumnCarousel = function () {	var that = this;	this.multiColumnCarousel = $('.multi-column-carousel');	this.viewport = this.multiColumnCarousel.find('.viewport');	this.multiColumnButton = this.multiColumnCarousel.find('.multi-column-button');	this.previousButton = this.multiColumnCarousel.find('.previous');	this.nextButton = this.multiColumnCarousel.find('.next');	this.paginationContainer = this.multiColumnCarousel.find('.pagination-container');	this.pageContainer = this.multiColumnCarousel.find('.page-container');	this.page = this.multiColumnCarousel.find('.page');	this.viewportWidth = that.viewport.outerWidth();	this.pageLength = this.page.length;	this.currentPage = 0;	this.animationDuration = 300;	this.breakpoints = {	large: {	size: 1024,	columns: 5	},	medium: {	size: 960,	columns: 3	},	small: {	size: 667,	columns: 1	}	};	this.init = function () {	this.setDimensions();	this.hideAndDisplayButtons();	this.generatePagination();	this.multiColumnButton.on('click', this.handleMultiColumnButtonClick);	$(window).resize(function () {	that.viewportWidth = that.viewport.outerWidth();	that.setDimensions();	that.setToCurrentPage();	that.generatePagination();	});	}	this.setDimensions = function () {	var columnsPerPage = this.getColumnsPerPage(),	pageCount = this.pageLength / columnsPerPage,	pageCountRounded = Math.ceil(pageCount),	targetContainerWidth = that.viewportWidth * pageCountRounded,	targetColumnWidth = this.viewportWidth / columnsPerPage;	this.pageContainer.width(targetContainerWidth);	this.page.width(targetColumnWidth);	var currentTallestHeight = 0;	this.page.height('auto');	for (var i = 0; i < this.pageLength; i++) {	var currentPageHeight = this.page.eq(i).outerHeight();	if (currentPageHeight > currentTallestHeight) currentTallestHeight = currentPageHeight;	}	this.page.height(currentTallestHeight);	}	this.getColumnsPerPage = function () {	var largeBreakpoint = this.breakpoints.large,	mediumBreakpoint = this.breakpoints.medium,	smallBreakpoint = this.breakpoints.small;	if (this.viewportWidth > mediumBreakpoint.size) return largeBreakpoint.columns;	if (this.viewportWidth <= mediumBreakpoint.size && this.viewportWidth > smallBreakpoint.size) return mediumBreakpoint.columns;	if (this.viewportWidth <= smallBreakpoint.size) return smallBreakpoint.columns;	}	this.hideAndDisplayButtons = function () {	var columnsPerPage = this.getColumnsPerPage();	if(this.currentPage == 0) this.previousButton.addClass('hidden');	if(this.currentPage + columnsPerPage >= this.pageLength) this.nextButton.addClass('hidden');	if(this.currentPage > 0) this.previousButton.removeClass('hidden');	if(this.currentPage + columnsPerPage < this.pageLength) this.nextButton.removeClass('hidden');	}	this.generatePagination = function () {	var columnsPerPage = this.getColumnsPerPage(),	pageCount = this.pageLength / columnsPerPage,	pageCountRounded = Math.ceil(pageCount);	this.paginationContainer.empty();	if (pageCountRounded <= 1) return;	for (var i = 0; i < pageCountRounded; i++) {	var $indicator = $('<div>').addClass('indicator');	$indicator.on('click', this.handleIndicatorClick);	this.paginationContainer.append($indicator);	}	this.updatePagination();	}	this.handleIndicatorClick = function (e) {	var $this = $(e.currentTarget),	currentIndex = $this.index(),	columnsPerPage = that.getColumnsPerPage(),	$indicator = that.paginationContainer.find('.indicator');	that.currentPage = currentIndex * columnsPerPage;	$indicator.removeClass('active');	$this.addClass('active');	that.page.removeClass('active');	that.page.eq(that.currentPage).addClass('active');	that.pageContainer.animate({	'left': -( that.multiColumnCarousel.find('.page.active').position().left )	}, that.animationDuration);	that.hideAndDisplayButtons();	}	this.updatePagination = function () {	var columnsPerPage = this.getColumnsPerPage(),	pageCount = this.pageLength / columnsPerPage,	pageCountRounded = Math.ceil(pageCount);	var $indicator = this.paginationContainer.find('.indicator'),	currentSlide = (this.currentPage / (columnsPerPage / pageCountRounded)) / pageCountRounded;	$indicator.removeClass('active');	$indicator.eq(currentSlide).addClass('active');	}	this.handleMultiColumnButtonClick = function (e) {	var $this = $(e.currentTarget),	columnsPerPage = that.getColumnsPerPage();	that.currentPage = that.multiColumnCarousel.find('.page.active').index();	that.page.removeClass('active');	if ($this.hasClass('next')) that.currentPage = that.currentPage + columnsPerPage;	else that.currentPage = that.currentPage - columnsPerPage;	that.page.eq(that.currentPage).addClass('active');	that.pageContainer.animate({	'left': -( that.multiColumnCarousel.find('.page.active').position().left )	}, that.animationDuration);	that.hideAndDisplayButtons();	that.updatePagination();	}	this.setToCurrentPage = function () {	var columnsPerPage = this.getColumnsPerPage();	if (this.currentPage % columnsPerPage != 0) {	this.currentPage--;	that.page.removeClass('active');	that.page.eq(that.currentPage).addClass('active');	return this.setToCurrentPage();	}	that.pageContainer.css('left', -( that.multiColumnCarousel.find('.page.active').position().left ));	that.hideAndDisplayButtons();	}
}
Multi-Column Responsive Carousel - Script Codes
Multi-Column Responsive Carousel - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 3
Size 5,686 Kb
Views 12,144
Do you need developer help for Multi-Column Responsive Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Grayson (agrayson) Script Codes
Name
Custom Event Policing
Circle Progression Plugin
Responsive square grid in pure CSS
Drag and Drop File Preview
Spinning Circles
SVG Animation - Circle Fill
Form Progress Bar
RPG Cooldown
Playing Animations on Scroll
Custom Select Element
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!