Combining the Power of Flickity and Bootstrap 4 Carousel

I recently started using Bootstrap 4 and was exploring Flickity just a week ago. Now, I am attempting to integrate Flickity with my Bootstrap 4 by referencing the Bootstrap 4 examples and utilizing the carousel. However, when I added Flickity to the built-in carousel, the layout became disarranged and misaligned.

I want to maintain the existing designs of the Bootstrap 4 example carousel while adding Flickity for touch, responsiveness, and flickable carousels. Below are the codes I used:

/* CUSTOM CSS CODE HERE */
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />


<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  /* NAVIGATION BAR HTML HERE */
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  /* CAROUSEL HTML CONTENT HERE */
</div>
<!-- /.container -->

jquerycsstwitter-bootstrapbootstrap-4flickity

Answer №1

I submitted a query on the Metafizzy Flickity Github repository regarding the integration issue between Flickity and Bootstrap 4 carousel. Mr. Desandro, the owner, responded with the following:

"It's not advisable to use both Bootstrap carousel and Flickity simultaneously as they serve as separate solutions for the same function. My suggestion is to pick one and utilize some of the Bootstrap carousel CSS elements like carousel-caption within the Flickity carousel."

He also provided a demo on Codepen, and the code snippet can be found below:

.carousel-cell {
  width: 100%;
  height: 400px;
  background: #777;
  position: relative;
}

.carousel-cell .container {
  height: 100%;
}
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<div class="flickity-carousel" data-flickity='{ "autoPlay": true }'>
  <div class="carousel-cell">
    <div class="container">
      <div class="carousel-caption d-md-block text-left">
        <h1>Example headline.</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="container">
      <div class="carousel-caption d-md-block">
        <h1>Another example headline.</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="container">
      <div class="carousel-caption d-md-block text-right">
        <h1>One more for good measure.</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
      </div>
    </div>
  </div>
</div>

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

Retrieve the date for the chosen time slot by utilizing the fullCalendar feature

I've been experiencing issues with a piece of code that is supposed to retrieve the date corresponding to a user-selected slot. Here's what I've tried so far: $('.fc-agenda-axis.fc-widget-header').on('mousedown', functio ...

javascriptjqueryfullcalendar

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

My website has a sticky navbar fixed at the top, and this is the structure of my sticky navbar: $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") { ...

javascriptjqueryhtmlcss

Using jQuery, generate a dynamic form to create a multidimensional array

I've set up a form where additional dropdowns can be dynamically added if the user clicks on a specific link. Here's an example of how it looks: <div class="dynamic-sale"> <select name="sizes[]" id="sizes" class="entry-dropdown"&g ...

javascriptjquerymultidimensional-array

Tips for crafting a table in Bootstrap with Vue Bindings

I recently started a Vue project and decided to use Bootstrap for styling. However, I encountered an issue with the table display, which looks weird as shown in the image below: https://i.sstatic.net/gRifL.png Here is a snippet of my code: <table clas ...

twitter-bootstrapvue.jsbootstrap-4

Enhancing React-Admin with custom Material-UI theme overrides for targeted CSS selectors on a global scale

When working with React-Admin, I encountered a challenge in applying specific CSS code globally within my Material UI theme. As I set up my theme, I included the following lines in the overrides section: overrides: { "@global": { &quo ...

cssreactjsherokumaterial-uireact-admin

Utilizing jQuery's nextUntil() method to target elements that are not paragraphs

In order to style all paragraphs that directly follow an h2.first element in orange using the nextUntil() method, I need to find a way to target any other HTML tag except for p. <h2 class="first">Lorem ipsum</h2> <p>Lorem ipsum</p> ...

javascriptjquerynextuntil

What steps are needed to have AJAX retrieve data from the controller within an MVC framework?

So, I am struggling with making an AJAX call in my project. I need to return a string as a JSON object from the controller back to the view where the ajax call is made. Despite numerous attempts, I have been unable to achieve this successfully. My main que ...

javascriptjquerymodel-view-controllerumbraco

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using: #loadQuote { position: fixed; w ...

htmlcssfrontend

The image from the SQL database fails to show up in the detailsView ImageField when using the jQuery lightbox, as well as the asp:Image control

Upon clicking the image displayed in the detailsView ImageField, the jquery lightbox pops up but fails to show the picture. Instead, it displays a red x in the middle of the lightbox. The same issue arises with the asp:Image control within the provided c ...

asp.netjquerysqllightboximagefield

What is the process for setting the opacity of the background in ::selection to 1?

Is it possible to have selected text with a solid background rather than a transparent one? Using opacity: 1 does not achieve the desired effect due to some standard override by the browser or other factors. ::-moz-selection { background: #fff; colo ...

htmlcssbackgroundselectionopacity

Is jQuery.each() failing to function properly in Firefox and Internet Explorer?

Having trouble with the $.each function behaving differently across browsers. I have lists with background images, and I want the parent div to fade in once these images finish loading. My code seems correct as there are no JavaScript errors in the conso ...

javascriptjqueryinternet-explorerfirefox

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Trying to dynamically generate an unordered list from XML onto a jQuery mobile page has been a bit of a challenge for me. While I can display the items on the page, the styling never seems to work properly, only showing up as plain text with blue links. Is ...

jquerycssajax

How can I utilize Material-UI's Grid component to make a single cell occupy the entire remaining horizontal space?

I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...

cssreactjsgridmaterial-ui

Tips for sending multiple HTTP requests to a single page from a single client

Is there a way to run multiple AJAX calls on the same page from the same client without them getting queued by the server? The calls are starting correctly, but it seems like the server is executing only one request at a time. I've checked the start ...

phpjqueryajaxhttp

Adding Empty Space Following Error Message in Codeigniter

I am encountering an issue with my code where there is a blank space appearing after the error message. Here is the code snippet that is causing the problem: <script> const successNotification = window.createNotification({ theme: 'error&a ...

javascriptphpjquerycodeigniter

Creating unique div IDs dynamically in PHP, JavaScript, and MySQL

I'm currently working with an ajax code that fetches data from table columns when a specific data is selected from the dropdown menu. In my surveycontent.php file, I have the following script: <script type="text/javascript"> function show ...

javascriptphpjquerymysqlajax

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

Switching between pages, displaying new content within a div without changing the URL address

I have experience working with the Ajax/jQuery .load() or php include() functions to load additional content into a div on a web page. Please check out this example I've created: my website featuring page transitions The setup for this page involves ...

phpjqueryhtmltransition

Overflow issue with floating labels in Bootstrap 5 within a grid container

Incorporated within this code snippet are floating selects placed inside a bootstrap grid: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[emai ...

htmlcsstwitter-bootstrapbootstrap-5

Unable to add song to collaborative playlist with Spotify Web Api due to 403 Forbidden error

I have encountered a problem while trying to add songs to a collaborative playlist using the code I have implemented. The button I created works perfectly fine for adding songs to my own playlists, but I receive a 403 forbidden error when attempting to add ...

javascriptjqueryspotifycollaborative