Filtr produktů tagem

by Petr Haluza

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<!-- start of hero -->
<section class="hero-slider hero-style">
  <div class="swiper-container">
    <div class="swiper-wrapper">
    
      <div class="swiper-slide">
        <div class="slide-inner slide-bg-image" data-background="https://www.hp-projector.com/u_file/fileUpload/2021-03/01/2021030169577.jpg">
          <div class="container">
            <div data-swiper-parallax="300" class="slide-title">
              <h2>HP BP5000</h2>
            </div>
            <div data-swiper-parallax="400" class="slide-text">
              <p>Nejjasněší obraz pro dokonalý zážitek</p>
            </div>
            <div class="clearfix"></div>
            <div data-swiper-parallax="500" class="slide-btns">
              <a href="#" class="theme-btn">Více</a>
            </div>
          </div>
        </div>
        <!-- end slide-inner -->
      </div>
      <!-- end swiper-slide -->

      <div class="swiper-slide">
        <div class="slide-inner slide-bg-image" data-background="https://www.hp-projector.com/u_file/fileUpload/2021-09/08/2021090878381.jpg">
          <div class="container">
            <div data-swiper-parallax="300" class="slide-title">
              <h2>HP CC200</h2>
            </div>
            <div data-swiper-parallax="400" class="slide-text">
              <p>Jako člen rodiny</p>
            </div>
            <div class="clearfix"></div>
            <div data-swiper-parallax="500" class="slide-btns">
              <a href="#" class="theme-btn">Více</a>
            </div>
          </div>
        </div>
        <!-- end slide-inner -->
      </div>
      <!-- end swiper-slide -->
    </div>
    <!-- end swiper-wrapper -->

    <!-- swipper controls...

CSS

* {box-sizing:border-box}
#filterOptions  {display:flex;  padding: 1em; margin:2em auto; width: 100%; justify-content: center; flex-wrap: wrap}
#filterOptions li { list-style:none; padding: 1em .5em .25em; margin:0 1em}
#filterOptions .active  {border-bottom: 3px solid #114A94;}
#filterOptions .active a {color: #114A94    }
#productShowcase {background:#f7f7fa}
#productHolder { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1em;}
#productHolder div.productItem { flex-grow: 1; flex-basis: 300px; min-width: 300px; max-width: 450px; display: flex; flex-direction: column; position: relative; background:white}
#productHolder div.productItem img { width 100%; max-width:100%; transform: scale(1); transition: 0.4s;}
#productHolder div.productItem:hover img { transform: scale(1.1); }
#productHolder div.productItem a { text-decoration:none  }
#productHolder div.productItem h3 { padding: 0 1em; margin: 0 0 1em }
#productHolder div.productItem h4 { padding: 0 1em; margin: 0.5em 0; }
#productHolder div.productItem span { padding: .5em 1em; margin: 1em ; display:inline-block; background:#165DBA; color:white; border-radius: 5px}


/*swiper*/
.hero-slider { width: 100%; height: 47.9vw; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 0; transition:all .4s ease;}
@media (max-width: 991px) {
}
@media (max-width: 767px) {
}
.hero-slider .swiper-slide { overflow: hidden; color: #fff;}
.hero-slider .swiper-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.hero-slider .slide-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;
  background-size: cover; background-position: center; display: flex; justify-content: flex-start; align-items:flex-start ; text-align: left;}
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next { background: transparent; width: 55px; height: 55px; line-height: 53px; margin-top: -30px; text-align: center; border:...

JavaScript

$(document).ready(function() {
  $('#filterOptions li a').click(function() {
    var ourClass = $(this).attr('class');
    $('#filterOptions li').removeClass('active');
    $(this).parent().addClass('active');

    if(ourClass == 'all') {
      $('#productHolder').children('div.productItem').fadeIn();
    }

else {
      $('#productHolder').children('div:not(.' + ourClass + ')').fadeOut();
      $('#productHolder').children('div.' + ourClass).fadeIn();
    }
    return false;
  });
});

/*swiper*/

    // HERO SLIDER
    var menu = [];
    jQuery('.swiper-slide').each( function(index){
        menu.push( jQuery(this).find('.slide-inner').attr("data-text") );
    });
    var interleaveOffset = 0.5;
    var swiperOptions = {
        loop: true,
        speed: 1000,
        parallax: true,
        autoplay: {
            delay: 6500,
            disableOnInteraction: false,
        },
        watchSlidesProgress: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        on: {
            progress: function() {
                var swiper = this;
                for (var i = 0; i < swiper.slides.length; i++) {
                    var slideProgress = swiper.slides[i].progress;
                    var innerOffset = swiper.width * interleaveOffset;
                    var innerTranslate = slideProgress * innerOffset;
                    swiper.slides[i].querySelector(".slide-inner").style.transform =
                    "translate3d(" + innerTranslate + "px, 0, 0)";
                }      
            },

            touchStart: function() {
              var swiper = this;
              for (var i = 0; i < swiper.slides.length; i++) {
                swiper.slides[i].style.transition = "";
              }
            },

            setTransition: function(speed) {
                var swiper =...