jQuery tabs with slider inside them?

Question

JavaScript

Good afternoon!

The customer asked to place a slider on the site like this www.tele2.lv/index.html , we are talking about this slider:



That is, several vertical tabs, inside a separate tab there is a horizontal slider in which three products are scrolled.

Maybe someone knows a ready-made solution? Searches turned up little, either tabs or a slider. I'm not very good with jQuery myself. I could correct the code for myself, but I am not yet able to make such a slider from scratch.

Thanks in advance!

Answer 1

The most primitive option: We take the tabs plugin and insert a separate carousel (slider) into each tab.

Answer 2

The simplest solution I see is to take the carousel plugin, forget about tabs as a view, since their functionality in the example is reduced to zero. When switching on the links, “feed” the carousel content (product description) and restart it. Thus, it will work faster (the absence of the second component - tabs) + the absence of the potential likelihood of "conflicts".

Answer 3

Here are the tabs with the slider inside. In the neighboring demos, you can see how the slider can be brought to a more suitable look.
http://jquerytools.org/demos/scrollable/site-navigation.html