【slider】实现侧边菜单栏，响应式布局，支持多级菜单，支持主题切换
This commit is contained in:
戒酒的李白
@@ -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)
|
||||
@@ -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: '<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
|
||||
}
|
||||
}],
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user