Implementing flickity with bootstrap 4 to create a seamless horizontal scrolling experience for cards that adjusts to different

Could anyone share a sample of successfully implementing flickity inside bootstrap 4? I am attempting to create a horizontal list of cards in a carousel format, where I can scroll through three at a time. I found using flickity intriguing, but I've encountered various issues integrating it within bootstrap 4. The cards end up being different sizes or disappearing altogether. I've tried utilizing row/col classes (the grid) and experimented with different approaches, but experienced distinct problems. Here's a reference point for what I'm aiming for, minus the scrollbar:

cssbootstrap-4flickity

Answer №1

If you want to make the scrollbar invisible, you can use this code snippet: 

::-webkit-scrollbar { 
    display: none; 
}

Answer №2

Once I delved deep into my issue, I reached out on Flickity's GitHub page and luckily, someone shared a functional BS4 example with me. This proved that using this plugin with BS4 was indeed possible; I just needed to figure out where I was going wrong. https://github.com/metafizzy/flickity/issues/742

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Move content off the screen using CSS3 translation

Throughout various projects, I have encountered the need to make elements on a webpage translate out of view (essentially making them fly out of the document). The idea was that by simply adding a class to the element, the CSS would take care of the animat ...

javascripthtmlcss

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...

javascriptjqueryhtmlcssxhtml

Troubleshooting inactive CSS hover animation

Greetings! I'm facing an issue with a CSS hover animation. Here are two demos I've created: In the first DEMO, the animation works perfectly. However, in the second DEMO, it doesn't seem to be functioning. On the second demo, there are two ...

javascriptjquerycss

Expanding the width of the containing div using CSS

I have a main container with multiple smaller divs inside it. None of these small divs have specified widths. I want the black div to expand and fill up the entire space, stretching all the way to the ABC div on the right. This only needs to work in Chr ...

csshtmlwidth

What is causing the npm element to malfunction?

I'm having trouble with the vertical timeline component from an npm package. It seems to be breaking, as you can see in the picture. Additionally, I haven't been able to figure out how to change the color of the vertical line despite reading thro ...

cssreactjsnpmfrontend

Issues with aligning text in a flexbox using Bootstrap 4's text-center property

I am currently working on a project to create a webpage with two vertical columns that are clickable and lead to different pages. Here is what I have so far. HTML <!-- Choices --> <div class="container-fluid"> <div class="row"> ...

csshtmltwitter-bootstrapbootstrap-4

Transform the header style columns of react-js Material-tables into rows

Currently experimenting with gradient designs on a material table. While I am able to apply the right color combination to the rows, I seem to be getting column-based results on the title of the table. Attached is a screenshot of my output for reference. ...

javascripthtmlcssreactjsmaterial-ui

I am struggling to layer the boxes using z-index

I have been struggling to find a solution to the problem, but nothing seems to be working. My goal is to create a gradient border for a slideshow on my website, similar to the one showcased in this video. I attempted to use the :before pseudo selector in m ...

htmlcss

The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the isotope plugin). <section id="section1" class="cd-section"> // pos. static/relative has height 0px <div class="itemIso"> // pos. absolute, he ...

htmlcsspositionheightabsolute

Is it possible to merge string and span elements to create a unified element?

In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...

javascripthtmlcssreactjs

Are you experiencing issues with modal contents extending beyond the modal on smaller screens?

I recently installed a modal plugin called blockUI for my image uploading needs. Although I have styled and positioned everything accordingly, I am facing an issue: Whenever I resize the browser screen, switch to my iPhone, or use another screen, some con ...

javascriptjqueryhtmlcssposition

Looking for assistance with hiding the dropdown icon in the <Select> component of material-ui framework

Currently, I am utilizing the Select component from material-ui. According to the documentation of material-ui, it is possible to customize the CSS of components by using the tag sx={{ ... }}. My goal is to style the component with a className of '.Mu ...

cssreactjsmaterial-ui

Display the query results on a separate blade

In my original attempt, I intended to display the results in a modal but later decided to show them in a different blade. My goal is to fetch all comments related to a post using its post_id. However, I encountered the following error: The GET method is no ...

javascriptjqueryhtmllaravelbootstrap-4

blurred image effect on bootstrap card hover

My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...

htmlcssbootstrap-4

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...

htmlcsshtml-listsmenuitem

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

cssvue.jssass

Using Three.js to generate a CSS3DObject containing an HTML iframe from a different origin results in an error

The HTML code snippet below incorporates Three.js for creating a 3D scene and rendering it with CSS. It includes two separate HTML files: index.html and moo.html. <!doctype html> <html lang="en> <body> <script src="js/Three.js">&l ...

javascripthtmlcssthree.jscross-domain

Enhancing interactivity with jQuery's ajax event functionality

Alright, let me share my code with you: $("#content_Div").ajaxStart(function () { $(this).css('cursor', 'wait') }).ajaxComplete(function () { $(this).css('cursor', 'default') }); I'm facing a simple is ...

jqueryhtmlcssmouseevent

Issue with navigation bar small box alignment on the left side

Hey there! I'm relatively new to bootstrap and html, and I've encountered an issue with my navbar setup. When I create my navbar, a small box appears on the left side of my screen. Here's an example <head> <meta charset="ut ...

htmlcssbootstrap-4

Tips For Making Your Bootstrap 4 Page Fit Perfectly on Mobile Screens

Currently in the process of developing . The frontpage has been created and tested using Chrome's dev console's device toolbar. Ensured that the correct viewport is set and utilized Bootstrap's column system for stacking elements. However, ...

htmlcssmobilebootstrap-4