https://dtayayincilik.com.tr/front/assets/js/script.js

1(function($) {
2
3  "use strict";
4
5  const tabs = document.querySelectorAll('[data-tab-target]')
6  const tabContents = document.querySelectorAll('[data-tab-content]')
7
8  tabs.forEach(tab => {
9    tab.addEventListener('click', () => {
10      const target = document.querySelector(tab.dataset.tabTarget)
11      tabContents.forEach(tabContent => {
12        tabContent.classList.remove('active')
13      })
14      tabs.forEach(tab => {
15        tab.classList.remove('active')
16      })
17      tab.classList.add('active')
18      target.classList.add('active')
19    })
20  });
21
22  // Responsive Navigation with Button
23
24  const hamburger = document.querySelector(".hamburger");
25  const navMenu = document.querySelector(".menu-list");
26
27  hamburger.addEventListener("click", mobileMenu);
28
29  function mobileMenu() {
30      hamburger.classList.toggle("active");
31      navMenu.classList.toggle("responsive");
32  }
33
34  const navLink = document.querySelectorAll(".nav-link");
35
36  navLink.forEach(n => n.addEventListener("click", closeMenu));
37
38  function closeMenu() {
39      hamburger.classList.remove("active");
40      navMenu.classList.remove("responsive");
41  }
42
43
44
45  $(document).ready(function(){
46
47    Chocolat(document.querySelectorAll('.image-link'), {
48        imageSize: 'contain',
49        loop: true,
50    })
51
52    $('#header-wrap').on('click', '.search-toggle', function(e) {
53      var selector = $(this).data('selector');
54
55      $(selector).toggleClass('show').find('.search-input').focus();
56      $(this).toggleClass('active');
57
58      e.preventDefault();
59    });
60
61
62    // close when click off of container
63    $(document).on('click touchstart', function (e){
64      if (!$(e.target).is('.search-toggle, .search-toggle *, #header-wrap, #header-wrap *')) {
65        $('.search-toggle').removeClass('active');
66        $('#header-wrap').removeClass('show');
67      }
68    });
69
70    $('.main-slider').slick({
71        autoplay: false,
72        autoplaySpeed: 4000,
73        fade: true,
74        dots: true,
75        prevArrow: $('.prev'),
76        nextArrow: $('.next'),
77    });
78      $('.mobile-slider').slick({
79          autoplay: false,
80          autoplaySpeed: 4000,
81          fade: true,
82          dots: true,
83          prevArrow: $('.mobile-slider-prev'),
84          nextArrow: $('.mobile-slider-next'),
85      });
86
87    $('.product-grid').slick({
88        slidesToShow: 4,
89        slidesToScroll: 1,
90        autoplay: false,
91        autoplaySpeed: 2000,
92        dots: true,
93        arrows: false,
94        responsive: [
95          {
96            breakpoint: 1400,
97            settings: {
98              slidesToShow: 3,
99              slidesToScroll: 1
100            }
101          },
102          {
103            breakpoint: 999,
104            settings: {
105              slidesToShow: 2,
106              slidesToScroll: 1
107            }
108          },
109          {
110            breakpoint: 660,
111            settings: {
112              slidesToShow: 1,
113              slidesToScroll: 1
114            }
115          }
116          // You can unslick at a given breakpoint now by adding:
117          // settings: "unslick"
118          // instead of a settings object
119        ]
120    });
121
122    AOS.init({
123      duration: 1200,
124      once: true,
125    })
126
127
128  }); // End of a document
129
130
131})(jQuery);