【slider】实现侧边菜单栏，响应式布局，支持多级菜单，支持主题切换

+(function (jQuery) {
+    "use strict";
+    const urlParams = new URLSearchParams(window.location.search);
+    const sidebar = urlParams.get('sidebar');
+    if (sidebar !== null) {
+        $('.iq-sidebar').removeClass('sidebar-dark', 'sidebar-light')
+        switch (sidebar) {
+            case "0":
+                $('.iq-sidebar').addClass('sidebar-dark')
+            break;
+            case "1":
+                $('.iq-sidebar').addClass('sidebar-light')
+            break;
+            default:
+                $('.iq-sidebar').removeClass('sidebar-dark').removeClass('sidebar-light')
+                break;
+        }
+    }
+})(jQuery)

+/*
+Template: Datum - Responsive Bootstrap 4 Admin Dashboard Template
+Author: iqonic.design
+Design and Developed by: http://iqonic.design/
+NOTE: This file contains the styling for Slider in Template.
+*/
+
+
+jQuery(document).ready(function() {
+  if(typeof $.fn.slick !== typeof undefined){
+    /*---------------------------------------------------------------------
+      slick
+      -----------------------------------------------------------------------*/
+      jQuery('.slick-slider').slick({
+        centerMode: true,
+        centerPadding: '60px',
+        slidesToShow: 9,
+        slidesToScroll: 1,
+        focusOnSelect: true,
+        responsive: [{
+            breakpoint: 992,
+            settings: {
+                arrows: false,
+                centerMode: true,
+                centerPadding: '30',
+                slidesToShow: 3
+            }
+        }, {
+            breakpoint: 480,
+            settings: {
+                arrows: false,
+                centerMode: true,
+                centerPadding: '15',
+                slidesToShow: 1
+            }
+        }],
+        nextArrow: '<a href="#" class="ri-arrow-left-s-line left"></a>',
+        prevArrow: '<a href="#" class="ri-arrow-right-s-line right"></a>',
+    });
+
+    jQuery('.top-rated-item').slick({
+        slidesToShow: 4,
+        speed: 300,
+        slidesToScroll: 1,
+        focusOnSelect: true,
+         appendArrows: jQuery('#top-rated-item-slick-arrow'),
+        responsive: [{
+            breakpoint: 1200,
+            settings: {
+                slidesToShow: 3
+            }
+        },{
+            breakpoint: 798,
+            settings: {
+                slidesToShow: 2
+            }
+        },{
+            breakpoint: 480,
+            settings: {
+                arrows: false,
+                autoplay:true,
+                slidesToShow: 1
+            }
+        }],
+    });
+
+    jQuery('#newrealease-slider').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 300,
+      centerMode: true,
+      centerPadding: false,
+      variableWidth: true ,
+      infinite: true,
+      focusOnSelect: true,
+      autoplay: false,
+      slidesToShow: 7,
+      slidesToScroll: 1,
+
+
+    });
+
+   jQuery("#newrealease-slider .slick-active.slick-center").prev('.slick-active').addClass('temp');
+    jQuery("#newrealease-slider .slick-active.temp").prev().addClass('temp-1');
+    jQuery("#newrealease-slider .slick-active.temp-1").prev().addClass('temp-2');
+
+     jQuery("#newrealease-slider .slick-active.slick-center").next('.slick-active').addClass('temp-next');
+    jQuery("#newrealease-slider .slick-active.temp-next").next().addClass('temp-next-1');
+    jQuery("#newrealease-slider .slick-active.temp-next-1").next().addClass('temp-next-2');
+
+     jQuery("#newrealease-slider").on("afterChange", function (){
+      var slick_index = jQuery(".slick-active.slick-center").data('slick-index');
+
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-1)+'"]').addClass('temp');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-2)+'"]').addClass('temp-1');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-3)+'"]').addClass('temp-2');
+
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+1))+'"]').addClass('temp-next');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+2))+'"]').addClass('temp-next-1');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+3))+'"]').addClass('temp-next-2');
+
+
+    });
+
+    jQuery("#newrealease-slider").on("beforeChange", function (){
+      var slick_index = jQuery(".slick-active.slick-center").data('slick-index');
+
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-1)+'"]').removeClass('temp');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-2)+'"]').removeClass('temp-1');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-3)+'"]').removeClass('temp-2');
+
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+1))+'"]').removeClass('temp-next');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+2))+'"]').removeClass('temp-next-1');
+      jQuery('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+3))+'"]').removeClass('temp-next-2');
+
+    });
+
+    jQuery('#favorites-slider').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 300,
+      centerMode: false,
+      autoplay: true,
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 1,
+            infinite: true,
+          }
+        },
+        {
+          breakpoint: 992,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 1
+          }
+        },
+        {
+          breakpoint: 767,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1
+          }
+        }
+      ]
+    });
+
+    jQuery('#similar-slider').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 300,
+      centerMode: false,
+      autoplay: true,
+      slidesToShow: 4,
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 1,
+            infinite: true,
+          }
+        },
+        {
+          breakpoint: 768,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 1
+          }
+        },
+        {
+          breakpoint: 576,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1
+          }
+        }
+      ]
+    });
+
+    jQuery('#single-similar-slider').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 300,
+      centerMode: false,
+      autoplay: true,
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 1,
+            infinite: true,
+          }
+        },
+        {
+          breakpoint: 768,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 1
+          }
+        },
+        {
+          breakpoint: 576,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1
+          }
+        }
+      ]
+    });
+
+    jQuery('#trendy-slider').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 300,
+      centerMode: false,
+      autoplay: true,
+      slidesToShow: 4,
+      slidesToScroll: 1,
+      responsive: [
+        {
+          breakpoint: 1024,
+          settings: {
+            slidesToShow: 3,
+            slidesToScroll: 1,
+            infinite: true,
+          }
+        },
+        {
+          breakpoint: 768,
+          settings: {
+            slidesToShow: 2,
+            slidesToScroll: 1
+          }
+        },
+        {
+          breakpoint: 576,
+          settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1
+          }
+        }
+      ]
+    });
+
+    jQuery('#description-slider').slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      arrows: false,
+      fade: true,
+      asNavFor: '#description-slider-nav'
+    });
+
+    jQuery('#description-slider-nav').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      asNavFor: '#description-slider',
+      dots: false,
+      arrows: false,
+      infinite: true,
+      vertical: true,
+      centerMode: false,
+      focusOnSelect: true
+    });
+
+    jQuery('.realeases-banner').slick({
+      slidesToShow: 5,
+      speed: 300,
+      arrows:false,
+      slidesToScroll: 1,
+      vertical: true,
+      verticalSwiping: true,
+      focusOnSelect: true,
+      responsive: [{
+          breakpoint: 992,
+          settings: {
+              arrows: false,
+              slidesToShow: 3
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              arrows: false,
+              verticalSwiping:false,
+              slidesToShow:4
+          }
+      }],
+  });
+
+  jQuery('.feature-album').slick({
+      slidesToShow: 6,
+      speed: 300,
+      slidesToScroll: 1,
+      focusOnSelect: true,
+       appendArrows: jQuery('#feature-album-slick-arrow'),
+      responsive: [{
+          breakpoint: 1200,
+          settings: {
+              slidesToShow: 4
+          }
+      },{
+          breakpoint: 992,
+          settings: {
+              slidesToShow: 3
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              arrows: false,
+              autoplay:true,
+              slidesToShow: 1
+          }
+      }],
+  });
+
+ jQuery('.feature-album-artist').slick({
+      slidesToShow: 6,
+      speed: 300,
+      slidesToScroll: 1,
+      appendArrows: jQuery('#feature-album-artist-slick-arrow'),
+      focusOnSelect: true,
+      responsive: [{
+          breakpoint: 1200,
+          settings: {
+              slidesToShow: 4
+          }
+      },{
+          breakpoint: 992,
+          settings: {
+              arrows:true,
+              slidesToShow: 3
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              arrows:false,
+              autoplay:true,
+              slidesToShow: 1
+          }
+      }],
+  });
+
+  jQuery('.hot-songs').slick({
+      slidesToShow: 2,
+      speed: 300,
+      appendArrows: jQuery('#hot-song-slick-arrow'),
+      slidesToScroll: 1,
+      rows:3,
+      focusOnSelect: true,
+      responsive: [{
+          breakpoint: 992,
+          settings: {
+              arrows: true,
+              slidesToShow: 2
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              arrows: false,
+              autoplay:true,
+              slidesToShow: 1
+          }
+      }],
+  });
+
+    /*---slider salon----*/
+      jQuery('.salone-styles').slick({
+        dots: false,
+        arrows: true,
+        infinite: true,
+        speed: 200,
+        autoplay: false,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        appendArrows: jQuery('#trending-order-slick-arrow'),
+        responsive: [
+          {
+            breakpoint: 1200,
+            settings: {
+              slidesToShow: 1
+            }
+          },
+          {
+            breakpoint: 1024,
+            settings: {
+              slidesToShow: 1
+            }
+          },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 1
+            }
+          }
+        ]
+      });
+
+   jQuery('.hot-video').slick({
+      slidesToShow: 2,
+      speed: 300,
+      appendArrows: jQuery('#hot-video-slick-arrow'),
+      slidesToScroll: 1,
+      focusOnSelect: true,
+      responsive: [{
+          breakpoint: 992,
+          settings: {
+              arrows: true,
+              slidesToShow: 2
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              arrows: false,
+              autoplay:true,
+              slidesToShow: 1
+          }
+      }],
+  });
+
+/*---------------------------------------------------------------------
+active music
+-----------------------------------------------------------------------*/
+  jQuery( 'ul.iq-song-slide li').on('click', function(){
+      jQuery('ul.iq-song-slide li').removeClass('active');
+      jQuery(this).addClass('active');
+  });
+
+
+/*---------------------------------------------------------------------
+social media post
+-----------------------------------------------------------------------*/
+    jQuery('.post-social').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 200,
+      autoplay: true,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+    });
+
+      jQuery('.trending-order').slick({
+        dots: false,
+        arrows: true,
+        infinite: true,
+        speed: 200,
+        autoplay: false,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        appendArrows: jQuery('#trending-order-slick-arrow'),
+        responsive: [
+          {
+            breakpoint: 1300,
+            settings: {
+              slidesToShow: 2
+            }
+          },
+          {
+            breakpoint: 1024,
+            settings: {
+              slidesToShow: 2
+            }
+          },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 1
+            }
+          }
+        ]
+      });
+
+      jQuery('.resto-blog').slick({
+        dots: false,
+        arrows: false,
+        infinite: true,
+        speed: 200,
+        autoplay: false,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        responsive: [
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 1
+            }
+          }
+        ]
+      });
+
+    jQuery('.image-slide-1').slick({
+      dots: false,
+      arrows: false,
+      infinite: true,
+      speed: 200,
+      autoplay: true,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+    });
+
+    jQuery('.stylist-salon').slick({
+      slidesToShow: 4,
+      speed: 300,
+      slidesToScroll: 1,
+      focusOnSelect: true,
+      autoplay: true,
+      arrows: false,
+      responsive: [{
+        breakpoint: 992,
+        settings: {
+          arrows: false,
+          slidesToShow: 2
+        }
+      }, {
+        breakpoint: 480,
+        settings: {
+          arrows: false,
+          autoplay: true,
+          slidesToShow: 1
+        }
+      }],
+    });
+
+    jQuery('.stylist-salon1').slick({
+      slidesToShow: 4,
+      speed: 300,
+      slidesToScroll: 1,
+      focusOnSelect: true,
+      autoplay: true,
+      responsive: [{
+        breakpoint: 992,
+        settings: {
+          arrows: true,
+          slidesToShow: 2
+        }
+      }, {
+        breakpoint: 480,
+        settings: {
+          arrows: false,
+          autoplay: true,
+          slidesToShow: 1
+        }
+      }],
+    });
+
+
+  }
+});