Skip to content

Instantly share code, notes, and snippets.

@sxidsvit

sxidsvit/sclick-tab.txt

Last active April 11, 2018 15:36
Show Gist options
  • Save sxidsvit/0efb1cf820729d5dc2524e2e55aa856c to your computer and use it in GitHub Desktop.
Save sxidsvit/0efb1cf820729d5dc2524e2e55aa856c to your computer and use it in GitHub Desktop.
Download ZIP
Табы становятся slick-слайдером (http://kenwheeler.github.io/slick/) на малых разрешениях экрана (по мотивам TIP)
Raw
sclick-tab.txt
// Источник: https://www.youtube.com/playlist?list=PLbr5YJBVly_5cIevS7GPZTDH-oNntnqXK (урок 17) + https://github.com/pit6262/landing-1
// Документация по slick-слайдеру: http://kenwheeler.github.io/slick/
======================= js-код ===================
$nav_tabs_slider = $('.nav-tab-list');
settings = {
slidesToShow: 1,
prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="fa fa-chevron-right"></i></button>',
infinite: false,
}
$nav_tabs_slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
$(this).parents('.tab-wrap').find('.tab-cont').addClass('hide');
$(this).find('.slick-current').siblings().removeClass('active');
var id = $(this).find('.slick-current a').attr('href');
$(id).removeClass('hide');
$(this).find('.slick-current').addClass('active');
return false
})
$(window).on('resize load', function(){
if($(window).width() > 767) {
if($nav_tabs_slider.hasClass('slick-initialized')) {
$nav_tabs_slider.slick('unslick')
}
return
}
if(!$nav_tabs_slider.hasClass('slick-initialized')) {
return $nav_tabs_slider.slick(settings)
}
})
=========================== html - код (фрагмент) ===============================
<div class="tab-wrap">
<ul class="nav-tab-list tabs">
<li class="nav-tab-list__item active">
<a href="#tab_1" class="nav-tab-list__link">All Work</a>
</li>
<li class="nav-tab-list__item">
<a href="#tab_2" class="nav-tab-list__link">Graphics</a>
</li>
<li class="nav-tab-list__item ">
<a href="#tab_3" class="nav-tab-list__link">WebDesign</a>
</li>
<li class="nav-tab-list__item">
<a href="#tab_4" class="nav-tab-list__link">Branding</a>
</li>
<li class="nav-tab-list__item ">
<a href="#tab_5" class="nav-tab-list__link">Video</a>
</li>
<li class="nav-tab-list__item">
<a href="#tab_6" class="nav-tab-list__link">Photography</a>
</li>
</ul>
<div class="box-tab-cont">
<div class="tab-cont" id="tab_1">
<div class="portfolio-list">
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
<div class="portfolio-list__item">
<a href="#" class="portfolio-list__link"></a>
<div class="portfolio-list__img">
<img src="img/123.png" alt="">
<a href="#" class="portfolio-list__preview"></a>
</div>
<div class="portfolio-list__footer">
<div class="portfolio-list__title">project Title Here</div>
<div class="portfolio-list__category">Graphics</div>
</div>
</div>
</div> </div>
<div class="tab-cont hide" id="tab_2">.2..</div>
<div class="tab-cont hide" id="tab_3">.3..</div>
<div class="tab-cont hide" id="tab_4">.4..</div>
<div class="tab-cont hide" id="tab_5">.5..</div>
<div class="tab-cont hide" id="tab_6">.6..</div>
</div>
</div>
===========================================================================
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment