Mobify enables the activation of jQuery Tabs on carousels

Looking to implement a tab menu above my Carousel that will correspond to different packages within the carousel when clicked.

Additionally, I want the tabs to adjust accordingly when the carousel is swiped, ensuring that the active tab reflects the current package in view.

Despite creating a working demo, I'm stuck on how to link the tabs and carousel together.

Here is a link to my demo and code snippet: - http://jsfiddle.net/jnYs7/

<ul id="navlist">
   <li>BASIC</li>
   <li class="activeStep">STANDARD</li>
   <li>SUPER</li>
   <li>ANTOHER</li>
</ul>

Using the following plugin:

Appreciate any assistance. Thank you

javascriptjqueryhtmlcssmobify

Answer №1

Illustrative example: http://jsfiddle.net/jnYs7/3/

The modification entailed relocating the #navlist within the .m-carousel and incorporating <a> with a data-slide='number_here' attribute, transforming it into a pagination. Additionally, the class name activeStep was changed to m-active.

Subsequently, only styling is required.

LATEST http://jsfiddle.net/jnYs7/10/

To adjust the gap between the divs, modify the margin-right value here:

.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:first-child),
.m-center:not(.m-fluid) > .m-carousel-inner > *:not(:last-child){
    position: relative;
    float: left;
    left:40px;
    margin-left:0px;
    margin-right:-30px;
}

Although the starting point was not explicitly mentioned, you can potentially utilize something like .trigger() from jQuery to simulate a click event on a link.

$('#navlist li:eq(2) a').trigger('click'); 
//:eq() denotes the index of the li (in this case super)

In the updated fiddle, some CSS adjustments were made overall; cross-reference the fiddle for any absent CSS.

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

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

My pathways are clearly mapped out, yet express is returning a frustrating 404 error

After exhausting all the similar posts on StackOverflow without finding a solution... Let's take a look at my app.js, which is the first file that the express library seeks when launching the app right after my server.js file responsible for setting ...

javascriptnode.jsexpress

Aligning the wp_nav_menu vertically within the site-header

Is there a way to vertically center the WordPress function wp_nav_menu in my site header? Although I followed the learnWebCode tutorial for the menu, I am struggling to implement it successfully. Is there anyone who can provide guidance or a solution? ...

csswordpress

Disappearing PHP Session following a redirection

I'm encountering an issue with the LDAP Authentication redirection in my system. When I access Index.php, it correctly redirects me to the login page (login.php). However, after entering my credentials, it fails to redirect me back to the Index Page. ...

phphtmlcssldap

Stop the __doPostBack function from executing

A grid control on my web page allows users to input values into the grid. When a new item is inserted, it generates a specific link: <a onclick="if(!$find('radGridHolidays_ctl00').insertItem()) return false;" id="radGridHolidays_ctl00_ctl02_ ...

jqueryasp.net

retrieve the class name of a reusable component in HTML

I have been assigned a web scraping project and I am required to scrape data from the following website for testing: The HTML: <div class="quote" itemscope itemtype="http://schema.org/CreativeWork"> <span class="text& ...

javascripthtmlweb-scrapingcomponents

Adjust the Appearance of Highcharts Legend Post-Rendering

After a Highchart is rendered, is it possible to modify the display settings without redrawing the chart? For instance, I would like to relocate the legend box from the right to the bottom upon screen resize, as illustrated in this image: --Example Pictur ...

javascriptangularjshighcharts

Puppeteer's flawed performance leads to the generation of low-quality

Currently, I am utilizing puppeteer to generate a PDF from my static local HTML file. However, the resulting PDF is turning out to be corrupted. When attempting to open the file using Adobe Reader, an error message pops up stating 'Bad file handle&apo ...

javascripthtmlnode.jspdfpuppeteer

Run the command "node index.js" to simultaneously start and stop the server

After installing WSL2 and the Ubuntu 22.04 distribution on Windows 11, I set up my environment, installed nvm, Node version 16.17.1, and then ran npm init in my folder. Following that, I installed Express and created an index.js file with a simple structur ...

javascriptnode.jsexpressubuntuwsl-2

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

I've been struggling for a while now to host my Portfolio CV on GitHub and I can't seem to get my CSS styles to apply correctly on the URL. - This is how I have linked it in the HTML document: <link rel="stylesheet" type="text/ ...

htmlcssgithubgithub-pagesweb-hosting

Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

In my current project, I am utilizing Excalidraw to draw a layer of <div>s on top of the <canvas>. While everything is functioning well, I have encountered an issue with scrolling through the infinite canvas. When the mouse hovers over one of t ...

htmlcssreactjsnext.jshtml5-canvas

Sending JSON data back to React in a file format

I have a json file within the project that contains the necessary data to display in my component. Can someone guide me on how to properly access the json file in react and output the data from it? data.json { "dictionary": [ { "index": "1", ...

javascriptreactjs

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

I've been struggling for hours trying to understand why I am unable to access and transfer data in my array from the JSON data in JIRA using the REST API. Basically, I am attempting to retrieve the JSON data from the JIRA website via URL with Basic Au ...

javascriptjsonreactjsjirajira-rest-api

What steps should I take to troubleshoot and fix the issue of data insertion errors in

https://i.sstatic.net/VccFk.jpg I am encountering an issue with a PHP form that is supposed to transfer information to a database after submission. However, every time I press the submit button, I receive an error message. Can anyone help troubleshoot th ...

phphtmlphpmyadmin

Undefined data is frequently encountered when working with Node.js, Express, and Mongoose

Having a beginner's issue: I'm attempting to use the "cover" property to delete a file associated with that collection, but the problem is that it keeps showing up as "undefined". Has anyone else encountered this problem before? Thank you in adv ...

javascriptnode.jsmongodbexpressmongoose

How to dynamically add variables to object paths using JavaScript and Angular

I've been struggling to grasp this concept, despite hours of searching. My goal is to dynamically generate form fields based on a user-selected 'type' from a dropdown menu. This will be linked to the variable "currentType" in Angular, which ...

javascriptangularjsvariablesobject

What could be causing this navigation item to vanish in Firefox?

Check out this link: http://jsfiddle.net/Nvntm/1/ In Firefox and some other browsers, the "Support" navigation item disappears while the other three remain. Why does this happen? Is there something incorrect in my code? ...

htmlcsscross-browser

javascript The final position achieved through requestAnimationFrame is never precise

let pf = document.querySelectorAll('.pf'); for (let i of pf) { Object.assign(i.style, { left: '400px' }) } function shiftLetters() { let start = performance.now(); let dist = -400; let dur = 500; const logoAnimate = ( ...

javascriptanimationrequestanimationframe

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

javascripthtml

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...

javascriptjqueryhtmlcss