From 00f047aa3bbe8e3b53aaf596ca1d8f2ffdb05ec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=92=E9=85=92=E7=9A=84=E6=9D=8E=E7=99=BD?= <670939375@qq.com> Date: Wed, 3 Jul 2024 14:09:35 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90slider=E3=80=91=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E8=8F=9C=E5=8D=95=E6=A0=8F=EF=BC=8C=E5=93=8D?= =?UTF-8?q?=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=A4=9A=E7=BA=A7=E8=8F=9C=E5=8D=95=EF=BC=8C=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/js/sidebar.js | 19 ++ static/js/slider.js | 561 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 580 insertions(+) create mode 100644 static/js/sidebar.js create mode 100644 static/js/slider.js diff --git a/static/js/sidebar.js b/static/js/sidebar.js new file mode 100644 index 0000000..45d5520 --- /dev/null +++ b/static/js/sidebar.js @@ -0,0 +1,19 @@ +(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) \ No newline at end of file diff --git a/static/js/slider.js b/static/js/slider.js new file mode 100644 index 0000000..10d99b8 --- /dev/null +++ b/static/js/slider.js @@ -0,0 +1,561 @@ +/* +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: '', + prevArrow: '', + }); + + 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 + } + }], + }); + + + } +});