Слайдер текста с табами

219

27 июня 2018, 21:10

Всем привет. Подскажите, пожалуйста, как попроще реализовать перелистывание пунктов с городами (не помещаются в одну строку). Может слайдер какой-нибудь есть хороший? Пробовал через owl carousel, она создаёт много своих блоков и классов и ничего не выходит.

$(".tab_item").not(":first").hide(); 
$(".wrapper .tab").click(function() { 
	$(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); 
	$(".tab_item").hide().eq($(this).index()).fadeIn() 
}).eq(0).addClass("active");

.tab { 
  display: inline-block; 
  margin: 5px 20px; 
  border: 1px solid gray; 
  } 
.tab.active { 
  background-color: red; 
  color: #fff; 
  } 
.tabs { 
margin-bottom: 30px.; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
    <div class="tabs"> 
	<span class="tab">Нижний Новгород</span> 
	<span class="tab">Ростов-На-Дону</span> 
	<span class="tab">Тюмень</span>   
	<span class="tab">Волгоград</span>   
	<span class="tab">Ярославль</span>  
	<span class="tab">Рязань</span>  
        <span class="tab">Москва</span>  
        <span class="tab">Челябинск</span>  
   </div> 
	<div class="tab_content"> 
		<div class="tab_item">Содержимое 1</div> 
		<div class="tab_item">Содержимое 2</div> 
		<div class="tab_item">Содержимое 3</div> 
		<div class="tab_item">Содержимое 4</div> 
		<div class="tab_item">Содержимое 5</div> 
		<div class="tab_item">Содержимое 6</div> 
	</div> 
</div>