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 positioned to the left, above the dots in desktop view.

Does this description make sense? You can also check out the jsfiddle for a visual reference. My initial approach involves using jQuery to locate the previous sibling of the "is-selected" class and apply a specific style to it. But I was wondering if there is an easier way to achieve this.

Thank you in advance for any insights or suggestions!

<div class="carousel-outer-flick">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell is-initial-select"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>
htmljquerycssflickity

Answer №1

insert below

<Carousel
settings={{
cellSpacing: 10 //adjusting this will give spacing between each slide
}}>

...

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

jQuery ajax functions only function properly in Internet Explorer

Having an issue with my multilingual MVC 3 application. I am using a dropdownlist to switch languages by saving the value into a cookie and session. The problem is that it only works in IE. When I reload the site or close Firefox or Chrome, the language ch ...

jqueryajaxasp.net-mvc-3cookies

Simple method for validating a text box field using jQuery without the need for a form

I am looking for a way to activate jquery unobtrusive validation without a form using the specified pattern: <script type="text/javascript"> $('.btnAddAsync').click(function (e) { e.preventDefault(); // Avoid href p ...

jqueryajaxasp.net-mvcvalidationunobtrusive-validation

jQuery/JSON Error: Unexpected character encountered during parsing

I am currently working on MVC4 and I am attempting to transfer data from a view to a controller using JQuery and JSON. The objective is to extract the values of checkboxes within a grid. Here is the code snippet: <script type="text/javascript"> func ...

jqueryasp.netjsonasp.net-mvc-4

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

Using jQuery to fill out a form using data from a JSON

I'm struggling with understanding jQuery... I want to populate a form inside a jQueryUI dialog box. Although I can retrieve the JSON data successfully, I am having difficulty referencing the data and setting the values in the form fields... Below are ...

jqueryjsonforms

Embracing Elegance with jQuery

Is there a way to customize the appearance of my list (<ul>) in the following code snippet? $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; ...

jquerycss

Display current weather conditions with the Open Weather API (featuring weather icons)

Hello everyone, I need some help from the community. I am currently working on a weather app using the openweather API. However, I'm facing an issue with displaying the weather conditions icon for each city. I have stored every icon id in a new array ...

javascripthtmlapivue.jsweather

Is the HTML templating mechanism compatible with Angular?

Trying to implement HTML templating in my Angular application, my code looks like the following: <script type='text/html' id="sampleId">...</script> However, upon loading the HTML, I noticed that the script block was not present in ...

htmlangularangular2-templateclient-side-templating

My requests are failing because jQuery AJAX does not send hashtag symbols

There's a challenge I'm facing while working with Elixir Phoenix and React.JS. The Token I have includes hashtags, and when I send a request to verify it, the hash symbols and everything after them are not being sent, causing the request to fail. ...

javascriptjqueryajaxreactjs

Updating a Div on your webpage using a JQuery UI dialog: A step-by-step guide

I am currently trying to update my webpage from a JQuery UI dialog, but the code I have so far does not seem to be working. Any assistance or guidance would be greatly appreciated. function submit_new_site() { // These are the input text IDs on the ...

javascriptjqueryhtmljquery-ui

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

"Exploring the interactivity of touch events on JavaScript

Hi there, I'm currently facing an issue with the touch events on my canvas. While the mouse events are functioning correctly and drawing as expected, incorporating touch events seems to be causing a problem. When I touch the canvas, the output remains ...

javascripthtmlcanvastouchoffset

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

cssreactjsmaterial-ui

The use of pattern fill in fabric.js is causing a decrease in rendering speed

I recently attempted to create a clip mask effect on a large image by using the picture as a pattern and setting it to the svg paths that support the desired shape. You can view the slow-loading jsfiddle example here: http://jsfiddle.net/minzojian/xwurbw ...

javascripthtmlsvgfabricjs

Ways to obtain the chosen option from a drop-down menu using jQuery

I'm currently experiencing an issue where the selected value of a drop down is not being displayed correctly. Instead of selecting the dropdown value, it's adding another value to the list. Below is the code snippet I'm using: JQuery var ...

javascriptjqueryhtmldrop-down-menu

Creating a grid layout similar to Tumblr using HTML and CSS

Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, i ...

htmlcssimagegrid

When trying to log the parsed JSON, it unexpectedly returns undefined even though it appears to be in good

Everything was working fine until a couple of days ago. Let's consider this as my PHP script: echo json_encode(array('stat'=>'ok')); I am sending an AJAX request to this script: $.post(base_url+'line/finalize/', {t ...

javascriptjqueryajaxjson

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

jqueryhtmlcss

Issue with Firefox causing problems with smooth scrolling Javascript on internal links

I recently created a one-page website using Bootstrap. The navigation menu items are internal links that point to different sections within the page, and I added some smooth scroll JavaScript for a more polished scrolling effect. While the website functio ...

javascriptjqueryfirefoxsmooth-scrollinginternal-link

Display only the content that is within the container and visible

Within this demonstration, there are 2 divs present - one containing the text t, and the other containing the text s. Both of these divs are enclosed within the .items container. As it stands currently, both divs are visible. However, my goal is to modify ...

htmlcss