STEP 1: Create divs inside of your page that will contain the carousel elements .gallery.gallery-main.gallery-main-imageimg(src=”/images/gallery3.jpg”).gallery-filmstripa(href=””)img(src=”/images/gallery1.jpg”)a(href=””)img(src=”/images/gallery2.jpg”)a(href=””)img(src=”/images/gallery3.jpg”)a(href=””)img(src=”/images/gallery4.jpg”)a(href=””)img(src=”/images/gallery5.jpg”) STEP 2: Set the styles for all of the elements inside of your carousel: The Displayed Image Gallery: The div around the display for the selected image /*set styles for the wrapper around the image that will be displayed on click*/ .gallery {background-color: black;} .gallery > .gallery-main {position: relative;height: 400px;overflow: hidden;} The div that contains the div that contains the image itself /*set styles for the inner container for the image that will be displayed on click*/ .gallery > .gallery-main > .gallery-main-image {position: absolute;top: 0; bottom: 0;right: 0; left: 0;} The image itself /*set styles for the image itself*/ .gallery > .gallery-main > .gallery-main-image > img {display: block;margin: 0 auto;max-height: 100%;max-width: 100%;height: 400px;} The Filmstrip that contains thumbnails of the images to be displayed: The container for the filmstrip /*set styles for the filmstrip container*/ .gallery > .gallery-filmstrip {position: relative;height: 280px;margin-top: 10px;} Everything inside of the filmstrip /*set styles for everything inside the filmstrip container*/ .gallery > .gallery-filmstrip > * {position: absolute;top: 0;left: 0;} Position everything inside of the filmstrip in the center /*position everything inside the filmstrip in the center*/.gallery > .gallery-filmstrip > * {position: absolute;top: 0;left: 0;} Animation for the images in the filmstrip /*set animation class to the filmstrip on click*/.gallery > .gallery-filmstrip-animated > * {transition: transform 1s, opacity 1s;} Set a height and width for all images in the container /*set a height and width for the gallery filmstrip images*/.gallery > .gallery-filmstrip img {height: 200px;width: 200px;} STEP 3: Create functions using and that will allow you to iterate through your images using the styles and animations you just created. jQuery Javascript Initialize the Gallery const initializeGallery = function() {positionGalleryFilmstrip(0, false) $(‘.gallery-filmstrip > *’).on(‘click’, function(event) {event.preventDefault();const cell = $(this);const index = cell.index()console.log(‘CLICKED’, index)positionGalleryFilmstrip(index-2)})} initializeGallery() Determine the indices that will be visible in the filmstrip and use an offset to to ensure that whatever index we are on gives us either a result of 0, 1, 2, 3, 4. How do we do this by using a for loop and modulo const visibleIndicies = function(totalNumberOfCells, numberOfVisibleCells, offset){let visible = []for (let index = 0; index < numberOfVisibleCells; index++) {visible[index] = (index+offset) % totalNumberOfCells}return visible} Determine the Z Index, Opacity, and Transform for each position depending on where it is on the filmstrip const zIndexForPosition = function(position){return ((position === 0 || position === 4) ? 1 :(position === 1 || position === 3) ? 2 :3)} const opacityForPosition = function(position){return ((position === 0 || position === 4) ? 0.4 :(position === 1 || position === 3) ? 0.7 :1)} const transformForPosition = function(position){return ({0: ‘translateX(160px) translateY(31px) scale(.8)’,1: ‘translateX(300px) translateY(31px) scale(1)’,2: ‘translateX(500px) translateY(31px) scale(1.3)’,3: ‘translateX(700px) translateY(31px) scale(1)’,4: ‘translateX(860px) translateY(31px) scale(.8)’,})[position]} Determine the index of the image (cell) based on its location in the filmstrip (array) const visibleIndicies = function(totalNumberOfCells, numberOfVisibleCells, offset) {let visible = []for (let index = 0; index < numberOfVisibleCells; index++) {visible[index] = (index+offset) % totalNumberOfCells}return visible} the most complex part of the function — positioning the image so that it applies the css styles to that specific index to be displayed within an array that contains 5 image elements const positionGalleryFilmstrip = function(offset, animate=true){const filmstrip = $(‘.gallery-filmstrip’)const numberOfCells = 5;const cells = filmstrip.children()if (offset < 0) offset += cells.lengthconst visibleCells = visibleIndicies(cells.length, numberOfCells,offset)if (animate){filmstrip.addClass(‘gallery-filmstrip-animated’)}else{filmstrip.removeClass(‘gallery-filmstrip-animated’)}cells.each(function(index){const cell = $(this)let position = visibleCells.indexOf(index)if (isBefore(index, visibleCells, cells.length)){cell.css({display: ‘block’,zIndex: ‘0’,opacity: ‘0’,transform: ‘translateX(100px) translateY(31px) scale(.6)’,})}else if (isAfter(index, visibleCells, cells.length)){cell.css({display: ‘block’,zIndex: ‘0’,opacity: ‘0’,transform: ‘translateX(890px) translateY(31px) scale(.6)’,})}else if (position === -1){cell.css({display: ‘none’,zIndex: ‘0’,opacity: ‘1’,transform: ‘’,})}else{cell.css({display: ‘block’,zIndex: zIndexForPosition(position),opacity: opacityForPosition(position),transform: transformForPosition(position),})}if (position === 2){const src = cell.find(‘> img’).attr(‘src’)const image = $(‘<img>’).attr(‘src’, src)const gallery = filmstrip.closest(‘.gallery’)const galleryMain = gallery.find(‘> .gallery-main’)const currentImageWrapper = galleryMain.find(‘.gallery-main-image:first’)const nextImageWrapper = currentImageWrapper.clone()const nextImage = nextImageWrapper.find(‘> img’)if (nextImage.attr(‘src’) === src) return;nextImage.attr(‘src’, src)galleryMain.prepend(nextImageWrapper)currentImageWrapper.fadeOut(function(){currentImageWrapper.remove()})}})} Whoa!! What is happening here? Let’s break it out and go over it step by step: create a function that positions the gallery filmstrip and set that to animate=true assign some variables that will contain the filmstrip element, the number of cells, and the children of the filmstrip const positionGalleryFilmstrip = function(offset, animate=true){const filmstrip = $(‘.gallery-filmstrip’)const numberOfCells = 5;const cells = filmstrip.children()} if the offset is less than zero then we want to add the total number of cells to that amount. For example if we are at offset -1 and we have an array of images with the length 39, our new offset value will be 38. if (offset < 0) offset += cells.lengthconst visibleCells = visibleIndicies(cells.length, numberOfCells, offset) if the above condition is true, which means the cell is visible then pass the new offset, length, and number of cells into the function visibleIndices. We will then store the value of this function into visibleCells if animate is true then we will add the animated class to the filmstrip, otherwise do not add that class if (animate){filmstrip.addClass(‘gallery-filmstrip-animated’)}else{filmstrip.removeClass(‘gallery-filmstrip-animated’)} now apply the following css styles to each cell which will give it the opacity, zIndex, and transform functions we need for each cell depending on its position in the filmstrip cells.each(function(index){const cell = $(this)let position = visibleCells.indexOf(index)if (isBefore(index, visibleCells, cells.length)){cell.css({display: ‘block’,zIndex: ‘0’,opacity: ‘0’,transform: ‘translateX(100px) translateY(31px) scale(.6)’,})} else if (isAfter(index, visibleCells, cells.length)){cell.css({display: ‘block’,zIndex: ‘0’,opacity: ‘0’,transform: ‘translateX(890px) translateY(31px) scale(.6)’,})}else if (position === -1){cell.css({display: ‘none’,zIndex: ‘0’,opacity: ‘1’,transform: ‘’,})}else{cell.css({display: ‘block’,zIndex: zIndexForPosition(position),opacity: opacityForPosition(position),transform: transformForPosition(position),})} Now we need to assign the attribute to the images that will allow us to fade it out and in if (position === 2){const src = cell.find(‘> img’).attr(‘src’)const image = $(‘<img>’).attr(‘src’, src)const gallery = filmstrip.closest(‘.gallery’)const galleryMain = gallery.find(‘> .gallery-main’)const currentImageWrapper = galleryMain.find(‘.gallery-main-image:first’)const nextImageWrapper = currentImageWrapper.clone()const nextImage = nextImageWrapper.find(‘> img’)if (nextImage.attr(‘src’) === src) return;nextImage.attr(‘src’, src)galleryMain.prepend(nextImageWrapper)currentImageWrapper.fadeOut(function(){currentImageWrapper.remove()})}})} last but not least we need to determine if a cell is before or after the cell const isBefore = function(index, visibleCells, cellsLength){let beforeFirstIndex = visibleCells[0]-1if (beforeFirstIndex < 0) beforeFirstIndex += cellsLengthreturn index === beforeFirstIndex} const isAfter = function(index, visibleCells, cellsLength){let afterLastIndex = visibleCells[visibleCells.length-1]+1if (afterLastIndex > cellsLength) afterLastIndex -= cellsLengthreturn index === afterLastIndex}

Creating a Carousel Using Only Jade(Pug), Javascript, jQuery and CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Advanced JavaScript with Kyle Simpson

A Guide to UI Design Patterns in Flutter: Navigation and Layout

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Advanced JavaScript with Kyle Simpson

A Guide to UI Design Patterns in Flutter: Navigation and Layout

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps