<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="products"> <div class="container"> <div class="section-heading scrollpoint sp-effect3"> <h1>Продукция</h1> <div class="divider"></div> <p>See what’s included we produce</p> </div> <div class="filter scrollpoint sp-effect3"> <a href="javascript:void(0)" class="button js-filter-all active">Чистящие и моющие средства</a> <a href="javascript:void(0)" class="button js-filter-one">Средства Гигиены</a> <a href="javascript:void(0)" class="button js-filter-two">Бумажно-Гигиенические средства</a> <a href="javascript:void(0)" class="button js-filter-three">Продукция ХоРеКа</a> <a href="javascript:void(0)" class="button js-filter-four">Пластиковые Изделия</a> </div> <div class="slider filtering scrollpoint sp-effect5" > <div class="one"> <img src="img/freeze/screens/profile.jpg" alt=""> <h4>Profile Page</h4> </div> <div class="two"> <img src="img/freeze/screens/menu.jpg" alt=""> <h4>Toggel Menu</h4> </div> <div class="three"> <img src="img/freeze/screens/weather.jpg" alt=""> <h4>Weather Forcast</h4> </div> <div class="one"> <img src="img/freeze/screens/signup.jpg" alt=""> <h4>Sign Up</h4> </div> <div class="one"> <img src="img/freeze/screens/calendar.jpg" alt=""> <h4>Event Calendar</h4> </div> <div class="two"> <img src="img/freeze/screens/options.jpg" alt=""> <h4>Some Options</h4> </div> <div class="three"> <img src="img/freeze/screens/sales.jpg" alt=""> <h4>Sales Analysis</h4> </div> <div class="four"> <img src="img/freeze/screens/sales.jpg" alt=""> <h4>Sales Analysis</h4> </div> </div><! --/slider filtering --> </div><! --/container --> </section>

section#products .slider { margin: 50px 0; } section#products .slider div img { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; padding: 10px; display: inline; } section#products .slider div h4 { text-align: center; margin-top: 40px; font-size: 16px; } section#products .slider .slick-dots li button { -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em; border-radius: 5em; } section#products .slick-prev, section#products .slick-next { width: 50px; height: 50px; top: 44%; } section#products .slick-slide { text-align: center; } section#products .slick-prev:before { content: "\f104"; } section#products .slick-next:before { content: "\f105"; } section#products .slick-prev:before, section#products .slick-next:before { font-size: 34px; -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em; border-radius: 5em; line-height: 45px; color: #CCC; border: 2px solid #CCC; width: 50px; display: inline-block; height: 50px; text-align: center; } section#products .filter { text-align: center; } section#products .filter a { display: inline-block; padding: 7px 20px; text-decoration: none; -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em; border-radius: 5em; margin: 10px 5px; text-transform: uppercase; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

var appMaster = { preLoader: function(){ imageSources = [] $('img').each(function() { var sources = $(this).attr('src'); imageSources.push(sources); }); if($(imageSources).load()){ $('.pre-loader').fadeOut('slow'); } }, smoothScroll: function() { // Smooth Scrolling $('a[href*=#]:not([href=#carousel-example-generic])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }, reviewsCarousel: function() { // Reviews Carousel $('.review-filtering').slick({ slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: false, autoplay: true, autoplaySpeed: 5000 }); }, screensCarousel: function() { // Screens Carousel $('.filtering').slick({ slidesToShow: 4, slidesToScroll: 4, dots: false, responsive: [{ breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 2, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } }] }); $('.js-filter-all').on('click', function() { $('.filtering').slickUnfilter(); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-one').on('click', function() { $('.filtering').slickFilter('.one'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-two').on('click', function() { $('.filtering').slickFilter('.two'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-three').on('click', function() { $('.filtering').slickFilter('.three'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-four').on('click', function() { $('.filtering').slickFilter('.four'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); }, animateScript: function() { $('.scrollpoint.sp-effect1').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInLeft');},{offset:'100%'}); $('.scrollpoint.sp-effect2').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInRight');},{offset:'100%'}); $('.scrollpoint.sp-effect3').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInDown');},{offset:'100%'}); $('.scrollpoint.sp-effect4').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeIn');},{offset:'100%'}); $('.scrollpoint.sp-effect5').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInUp');},{offset:'100%'}); }, revSlider: function() { var docHeight = $(window).height(); var mainSlider = $('.tp-banner').revolution({ delay: 9000, startwidth: 1170, startheight: docHeight, hideThumbs: 10, touchenabled: false, fullWidth: "on", hideTimerBar: "on", fullScreen: "on", onHoverStop: "off", fullScreenOffsetContainer: "" }); }, scrollMenu: function(){ var num = 50; //number of pixels before modifying styles $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('nav').addClass('scrolled'); } else { $('nav').removeClass('scrolled'); } }); }, placeHold: function(){ // run Placeholdem on all elements with placeholders Placeholdem(document.querySelectorAll('[placeholder]')); } }; // AppMaster $(document).ready(function() { appMaster.smoothScroll(); appMaster.reviewsCarousel(); appMaster.screensCarousel(); appMaster.animateScript(); appMaster.revSlider(); appMaster.scrollMenu(); appMaster.placeHold(); });