Нужен табы и сладер в одном лице?

Question

[Роман]

Добрый день!

Нужны табы, что бы можно было назвать каждую вкладку индивидуально (шоколадка/конфетка/плитка) и что бы была возможность прокручивать стрелками как у слайдера.

Облазил весь инеренет, нашел только вот это (Image Slider with external controls.), но у нее есть существенный минус у вкладок нет .active класса

Если она будет еще и адаптивной, то это предел мечтаний!

Подскажите, у кого есть какие варианты. Спасибо!

Пример, что бы более понятно про что речь:

<div class="slider">
	<div class="controls">
		<a href="#" class="active">Сладер 1</a>
		<a href="#" class="">Сладер 2</a>
		<a href="#" class="">Сладер 3</a>
	</div>		
	<div class="carousel">
		<ul>
			<li class="item active">
				Сладер 1
			</li>
			<li class="item">
				Сладер 2
			</li>
			<li class="item">
				Сладер 3
			</li>
		</ul>
	</div>
	<div class="button">
		<a href="#" class="prev">Вперед</a>
		<a href="#" class="next">Назад</a>
	</div>
</div>

Answer 1

[Ольга Ветер]

Посмотрите BxSlider. Это точно в его возможностях, есть хорошая документация и масса примеров, как на русском, так и на английском. Есть свойства для простой адаптивности.

Answer 2

[alvvi]

Подсказываю: любой не супер-light слайдер - ваш вариант.

Comments

[Роман]

Обновил вопрос, посмотрите пожалуйста! Ну и дайте хотя бы один вариант )))

[alvvi]

Роман Лазарев: один вариант.

[Роман]

Илья Ростопка: с ним проблема ))) точки под слайдером генерируются автоматически, а мне нужно каждую точку назвать уникальным именем!

[alvvi]

Роман Лазарев: а документацию прочитать? В опциях есть параметр customPaging: принимает функцию, которая должна возвращать DOM-элемент. В этой функции можете называть ваши точки как угодно, данные для названий можно оставить, например, в data-аттрибутах слайдов.

[Артур Карапетян]

Роман Лазарев: Вы издеваетесь? Вам трудно зайти в документацию и посмотреть как делать кастомные доты ?!

[Артур Карапетян]

Илья Ростопка: Видимо, люди считают, что на тостере все сделают за них.

[Роман]

Илья Ростопка: Спасибо, сейчас посмотрю!
Артур: Ни кто не чего считает, просто если вы работали с этим, то и знаете - я не сталкивался. В вопросе просил подсказать, а не делать за меня что либо!

Илье спасибо за подсказку, пойду разбираться!

[Роман]

Илья Ростопка: слушай, а ты сам пробовал? Там документации как таковой нет, в каком виде записывать значения customPaging не понятно, и примеров нет. Не подскажешь?

[alvvi]

Роман Лазарев: репо на гитхаб > slick > slick.js там есть пример.

[Роман]

Илья Ростопка: херамация один словом, не работает. По примеру, он тупо ставит 1,2,3,4 - а мне нужно каждую вкладку уникальное имя - только время потратил на изучение данной карусели (((

[alvvi]

Роман Лазарев: изучайте JS и вы поймете, что это банальная задача. СustomPaging - это опция и она принимает любую функцию.

[Роман]

Илья Ростопка: разобрался и понял, что тоже не подходит. Там можно брать title из картинки, ссылки и т.д. но этот вариант тоже не подходит. У меня в одной вкладке напихано объектов. Нужно в ручную задавать названия, а эта карусель этого не может. Жалко потраченное время, вернулся к тому с чего начал.

[alvvi]

Роман Лазарев: его можно брать из любого места, из которого его может достать JS - начиная от DOM'a и заканчивая любой структурой хранения данных внутри JS. Дальше объяснять вам не вижу смысла, в любом случае все будет упираться в ваше незнание JS.