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

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

"Clicking on a hash link will refresh the current page

I have a snippet of code embedded on external websites that loads HTML, CSS, and JavaScript using a <script> tag. Within the code is a JavaScript function that triggers when a specific link is clicked: <a href="#">?</a> If there are Ja ...

htmlhashbrowser-bugs

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

I'm currently working with two separate codes: one for HTML and the other for JavaScript. I am facing an issue where the button keeps disappearing when I try to add any CSS styling to it. Even a basic CSS file seems to override everything else and lea ...

javascripthtml

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

javascripthtmlcssexpressejs

Emptying the data of a form that has been submitted using Ajax

None of the similar questions really address the issue from my perspective. I am facing a challenge with a user registration form where I utilize .post for ajax handling. Below is the code snippet: $('#register_user_form').submit(function(){ ...

phpjavascriptjqueryajax

Changing Value in jQuery Dropdown Menu

I currently have two JQuery UI dropdowns. When I select an option in the first dropdown and set a checkbox to true, I want to copy that selected value to the second dropdown using the .change() event of the checkbox. To retrieve the selected value, I use ...

jqueryjquery-uidrop-down-menu

Firefox presents a compact box positioned between the images

When attempting to use flags as a way to switch between languages, I encountered an issue in Firefox where a small box appears between the images on the Hebrew site. In Chrome, everything works fine. I implemented the following code: <div class="flags ...

csshtml

Using Ajax to submit a form on a Spring MVC webpage

I need help with submitting a form using AJAX post without refreshing the page. My technology stack includes Spring and jQuery. Can someone guide me on how to submit the form via AJAX and utilize the class in the controller for processing? The model Clas ...

jqueryspringspring-mvc

Translating jQuery to Regular JavaScript Principles

Could someone please provide me with a comparison between various jQuery methods and their equivalent normal Javascript DOM methods? For example: prev() next() before() after() I would greatly appreciate it if you could offer a mapping of jQuery/Javascr ...

javascriptjqueryhtmldomdom-manipulation

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

Silly problem arising from the animate feature in jQuery

Apologies for my poor English. I am facing an issue with the animate function of jQuery in my code snippet. It seems to work fine at line 2, but it doesn't work at line 3. Can someone help me understand why? $('.opac').hover(function(){ ...

javascriptjqueryjquery-animate

Choosing and transferring the table data to be shown in the pop-up box

Having encountered an issue with a popup trigger placed inside a td element, I am seeking advice on how to pass table data into the popup window. Unfortunately, the main popup window was positioned outside the while loop, resulting in multiple instances of ...

cssjsonajaxpopuppopupwindow

Chrome problem: jquery/javascript issues post-Ajax request

I encountered an unusual problem with Chrome while attempting to resolve it within a page that does not adhere to any W3C standards. I have identified nearly 1000+ W3C issues in this page. The issue pertains to an "onclick" function that functions correct ...

jquerygoogle-chromexhtmlhideshow

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

In the index.php file, there is a script that triggers an ajax call when a header element is clicked. This call sends a $selection variable to ajax.php, which then replaces #div1 with the received HTML data. <script> $(document).ready(function(){ ...

javascriptphpjqueryhtmlajax

Guide on How to Show Only the Initial Word of an H2 Header Using JavaScript or CSS

Is there a way to display only the first word from an h2 heading? For instance: In the website's source code, it would appear like this <h2> Stackoverflow is an Ideal Place</h2> But on the live website, it should be displayed like this ...

javascripthtmlcss

Tips for closing a popup without exiting the entire webpage

I'm facing an issue while trying to create a video playlist using two HTML files (index.html and video.html). In my video.html file, I have set up a popup for playing videos. However, whenever I close the popup or click anywhere on the page, it redire ...

javascripthtmljquery-mobile

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

Tips for customizing the WooCommerce product page

If you want to customize the layout of a WooCommerce product page, you can override the template by copying the WooCommerce template folder into your theme. You can find step-by-step instructions here. I am looking to change the layout of a WooCommerce pr ...

javascriptphpcsswordpresswoocommerce

The submitHandler for AJAX does not function properly when using bootstrapvalidator

I'm encountering an issue with the Bootstrap validation tool found at https://github.com/nghuuphuoc/bootstrapvalidator The submitHandler function seems to be malfunctioning for me. Upon form submission, the entry is not being created and the form rel ...

javascriptjqueryhtmlajax

How to Centre Align Items in a React Native ListView

Is there a way to center align the items in a ListView without using another View wrapping the ListView? Currently, all the items are left aligned. ListView Code Snippet <ListView dataSource={this.state.dataSource} renderRow={this.renderItem} ...

ioscsslistviewreact-native