ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Базовый переключатель Flexslider вкладок

Базовый переключатель Flexslider вкладок

В материале представлены адаптивный переключатель вкладок Basic, что созданы при помощи jquery и flexslider с некоторыми HTML, CSS и Javascript. Также эти вкладки корректно отображаются на всем мобильных аппаратах. Тек же табы, но только изначально выстроены под изображение, и переключатели находятся в самом верху по левую сторону. Оттенок цвета здесь представлен в светло-серой гамме, где самостоятельно все можно в закрепленной стилистике выставить ту палитру цвета, которая соответствует главному оформлению сайта.

Не говоря про то, что сами можете еще все стильно оформить, так как не стал этого делать, ведь у каждого стиль панорамы оригинальный, что при установке все выстраивается под заданный оттенок цвета. А вообще это легкий и надстраиваемый переключатели, которые соответствую вкладкам по своему количеству, где задействован jQuery для создания функционала, а также основа списка HTML для переключения между содержимым вкладок с пользовательскими событиями

Так эти переключатели смотрятся при установочном процессе.

Адаптивный вкладки - табы на CSS для сайта

Установка:

HEAD

Код

HTML

Код

<div class="row">
  <div class="medium-12 columns">

  <div class="switcher">

  <ul class="tab-nav show-for-medium-up">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Forth</li>
  <li>Fifth</li>
  </ul>

  <select class="select-nav show-for-small-down">
  <option selected>Select Option</option>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
  <option>Fourth</option>
  <option>Fifth</option>
  </select>

  </div>

  <div class="tab-container">
  <ul class="slides">
  <li>
  <div class="row">
  <div class="medium-12 columns">
  <p>Slide 1</p>
  <img class="alignleft" src="http://placekitten.com/1000/300" alt="" />
  </div>
  </div>
  </li>
  <li>
  <div class="row">
  <div class="medium-12 columns">
  <p>Slide 2</p>
  <img class="alignleft" src="http://placekitten.com/1000/685" alt="" />
  </div>
  </div>
  </li>
  <li>
  <div class="row">
  <div class="medium-12 columns">
  <p>Slide 3</p>
  <img class="alignright" src="http://placekitten.com/1000/320" alt="" />
  </div>
  </div>
  </li>
  <li>
  <div class="row">
  <div class="medium-12 columns">
  <p>Slide 4</p>
  <img class="alignright" src="http://placekitten.com/1000/470" alt="" />
  </div>
  </div>
  </li>
  <li>
  <div class="row">
  <div class="medium-12 columns">
  <p>Slide 5</p>
  <img class="alignright" src="http://placekitten.com/1000/310" alt="" />
  </div>
  </div>
  </li>
  </ul>
  </div>

  </div>

</div>
</div>

CSS

Код

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
*, *:before, *:after {box-sizing:border-box;}

.switcher {
  width: 100%;
  float:left;
  margin: 40px 0 0;
}
.tab-nav {
  padding: 0;
  margin: 0;
  width: 100%;
  float:left;
}
.tab-nav li {
  list-style:none;
  padding: 10px 20px;
  float: left;
  z-index: 10;
  cursor: pointer;
  font-size: .75em;
  color: #eee;
  background: #aaa;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.tab-nav li:first-child {
  border-radius: 15px 0 0 0;
}
.tab-nav li:last-child {
  border-radius: 0 15px 0 0;
}

.tab-nav li.flex-active, .slide-nav li:hover {
  cursor: pointer;
  color: #aaa;
  background: #eee;
}

.tab-container {
  float: left;
  width: 100%;
  background: #eee;
  padding: 2em;
}
.tab-container img {
  display:block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.flex-control-nav,.flex-direction-nav,.slides{margin:0;padding:0;list-style:none}.flexslider{padding:0}.flexslider .slides>li{display:none;-webkit-backface-visibility:hidden}
JS

$('.tab-container').flexslider({
  animation: "slide",
  slideshow: false,
  smoothHeight: true,
  animationSpeed: 500,
  directionNav: false,
  controlsContainer: ".container",
  controlNav: true,
  manualControls: ".tab-nav li",
  start: function(){
  $('.tab-container').resize();
  },
});
$('.switcher select').change(function(){
  $('.tab-container').flexslider($('option:selected',$(this)).index()-1);
});

В этом примере ниже вы увидите, как сделать переключатель вкладок Basic с помощью jquery и flexslider с некоторыми HTML, CSS и Javascript.

Демонстрация

08 Ноября 2020 Загрузок: 1 Просмотров: 823 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0