Bootstrap Snippet Ptoducts section using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Ptoducts section"
Bootstrap 3.2.0 Snippet by Azamatuz

Related: See More

Questions / Comments:

"Ptoducts section" Bootstrap 3.2.0 Snippet by Azamatuz

Related: See More

Questions / Comments:

"Ptoducts section"
Bootstrap 3.2.0 Snippet by Azamatuz