Jquery SlickJS,unslick()删除问题
下午好 我目前正在工作和使用,我正在尝试使用Jquery SlickJS,unslick()删除问题,jquery,window-resize,Jquery,Window Resize,下午好 我目前正在工作和使用,我正在尝试使用unslick()删除窗口宽度大于375时的几个项目代码片段 当窗口大小小于375时,我可以看到resize函数的工作方式是slick()转盘显示,无任何问题 如果有人知道出了什么问题,请告诉我 多谢各位 JS $(document).ready(function () { // Header Slider $('.touchslider_one').slick({ autoplay: true, in
unslick()删除窗口宽度大于375时的几个项目代码>代码片段
当窗口大小小于375时,我可以看到resize函数的工作方式是slick()代码>转盘显示,无任何问题
如果有人知道出了什么问题,请告诉我
多谢各位
JS
$(document).ready(function () {
// Header Slider
$('.touchslider_one').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 3000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
cssEase: 'linear',
});
onresize();
$(window).resize(function () {
onresize();
});
});
function onresize(){
checkWidth();
}
function checkWidth() {
if ($(window).width() < 376 ) {
// Boxes
$('.touchslider_fourth').slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
// Featured Products
$('.touchslider_three').slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
// Logos
$('.touchslider_two').unslick();
$('.touchslider_two').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
// Test
console.log('Larger than 375');
// Remove
$('.touchslider_fourth').unslick();
$('.touchslider_three').unslick();
$('.touchslider_two').unslick();
// Rebuild
$('.touchslider_two').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 5,
slidesToScroll: 5,
cssEase: 'linear'
});
}
}
$(document).ready(function () {
touchsliderone();
onresize();
$(window).resize(function () {
onresize();
});
});
// Resize
function onresize () {
touchslidertwo();
touchsliderthree();
touchsliderfour();
}
// Header Carousel
function touchsliderone() {
$('.touchslider_one').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 3000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
cssEase: 'linear',
});
}
// Boxes Carousel
function touchsliderfour() {
var $touchsliderfour = $('.touchslider_four');
if ($(window).width() < 376) {
if($touchsliderfour.hasClass('slick-initialized')) {
$touchsliderfour.unslick();
}
$touchsliderfour.slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchsliderfour.hasClass('slick-initialized')) {
$touchsliderfour.unslick();
}
}
}
// Featured Products Carousel
function touchsliderthree() {
var $touchsliderthree = $('.touchslider_three');
if ($(window).width() < 376) {
if($touchsliderthree.hasClass('slick-initialized')) {
$touchsliderthree.unslick();
}
$touchsliderthree.slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchsliderthree.hasClass('slick-initialized')) {
$touchsliderthree.unslick();
}
}
}
// Logos Carousel
function touchslidertwo() {
var $touchslidertwo = $('.touchslider_two');
if ($(window).width() < 376) {
if($touchslidertwo.hasClass('slick-initialized')) {
$touchslidertwo.unslick();
}
$touchslidertwo.slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchslidertwo.hasClass('slick-initialized')) {
$touchslidertwo.unslick();
}
$touchslidertwo.slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 5,
slidesToScroll: 5,
cssEase: 'linear'
});
}
}
$(文档).ready(函数(){
//标题滑块
$('.touchlider_one')。光滑({
自动播放:对,
无限:是的,
速度:1500,
自动播放速度:3000,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
是的,
cssEase:'线性',
});
onresize();
$(窗口)。调整大小(函数(){
onresize();
});
});
函数onresize(){
检查宽度();
}
函数checkWidth(){
如果($(窗口).width()<376){
//盒子
$('touchlider_fourth')。光滑({
自动播放:错误,
无限:是的,
速度:1500,
自适应高度:正确,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
cssEase:“线性”
});
//特色产品
$('.touchlider_三')。光滑({
自动播放:错误,
无限:是的,
速度:1500,
自适应高度:正确,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
cssEase:“线性”
});
//标志
$('.touchlider_two').unslick();
$('.touchlider_two')。光滑({
自动播放:对,
无限:是的,
速度:1500,
自动播放速度:6000,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
cssEase:“线性”
});
}否则{
//试验
console.log('大于375');
//除去
$('.touchlider_fourth').unslick();
$('.touchlider_-three').unslick();
$('.touchlider_two').unslick();
//重建
$('.touchlider_two')。光滑({
自动播放:对,
无限:是的,
速度:1500,
自动播放速度:6000,
点:错,
幻灯片放映:5,
幻灯片滚动:5,
cssEase:“线性”
});
}
}
在讨论和阅读了几个问题后,它似乎找到了我想要的答案,尽管我不得不调整以满足我的要求,但它在第一次运行时基本上是有效的
我现在可以触发unslick()代码>当窗口在特定宽度上调整大小时,如果窗口的大小小于特定宽度,则重建旋转木马
我还要感谢你的推特和建议
JS
$(document).ready(function () {
// Header Slider
$('.touchslider_one').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 3000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
cssEase: 'linear',
});
onresize();
$(window).resize(function () {
onresize();
});
});
function onresize(){
checkWidth();
}
function checkWidth() {
if ($(window).width() < 376 ) {
// Boxes
$('.touchslider_fourth').slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
// Featured Products
$('.touchslider_three').slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
// Logos
$('.touchslider_two').unslick();
$('.touchslider_two').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
// Test
console.log('Larger than 375');
// Remove
$('.touchslider_fourth').unslick();
$('.touchslider_three').unslick();
$('.touchslider_two').unslick();
// Rebuild
$('.touchslider_two').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 5,
slidesToScroll: 5,
cssEase: 'linear'
});
}
}
$(document).ready(function () {
touchsliderone();
onresize();
$(window).resize(function () {
onresize();
});
});
// Resize
function onresize () {
touchslidertwo();
touchsliderthree();
touchsliderfour();
}
// Header Carousel
function touchsliderone() {
$('.touchslider_one').slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 3000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
cssEase: 'linear',
});
}
// Boxes Carousel
function touchsliderfour() {
var $touchsliderfour = $('.touchslider_four');
if ($(window).width() < 376) {
if($touchsliderfour.hasClass('slick-initialized')) {
$touchsliderfour.unslick();
}
$touchsliderfour.slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchsliderfour.hasClass('slick-initialized')) {
$touchsliderfour.unslick();
}
}
}
// Featured Products Carousel
function touchsliderthree() {
var $touchsliderthree = $('.touchslider_three');
if ($(window).width() < 376) {
if($touchsliderthree.hasClass('slick-initialized')) {
$touchsliderthree.unslick();
}
$touchsliderthree.slick({
autoplay: false,
infinite: true,
speed: 1500,
adaptiveHeight: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchsliderthree.hasClass('slick-initialized')) {
$touchsliderthree.unslick();
}
}
}
// Logos Carousel
function touchslidertwo() {
var $touchslidertwo = $('.touchslider_two');
if ($(window).width() < 376) {
if($touchslidertwo.hasClass('slick-initialized')) {
$touchslidertwo.unslick();
}
$touchslidertwo.slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear'
});
} else {
if($touchslidertwo.hasClass('slick-initialized')) {
$touchslidertwo.unslick();
}
$touchslidertwo.slick({
autoplay: true,
infinite: true,
speed: 1500,
autoplaySpeed: 6000,
dots: false,
slidesToShow: 5,
slidesToScroll: 5,
cssEase: 'linear'
});
}
}
$(文档).ready(函数(){
touchliderone();
onresize();
$(窗口)。调整大小(函数(){
onresize();
});
});
//调整大小
函数onresize(){
touchlidertwo();
TouchSliderTree();
touchliderfour();
}
//收割台转盘
函数touchliderone(){
$('.touchlider_one')。光滑({
自动播放:对,
无限:是的,
速度:1500,
自动播放速度:3000,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
是的,
cssEase:'线性',
});
}
//盒子传送带
函数touchliderfour(){
var$touchliderfour=$('.touchlider_-four');
如果($(窗口).width()<376){
if($touchliderfour.hasClass('slick-initialized')){
$touchliderfour.unslick();
}
$touchliderfour.slick({
自动播放:错误,
无限:是的,
速度:1500,
自适应高度:正确,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
cssEase:“线性”
});
}否则{
if($touchliderfour.hasClass('slick-initialized')){
$touchliderfour.unslick();
}
}
}
//特色产品传送带
函数TouchSliderTree(){
var$touchliderTree=$('.touchlider_-three');
如果($(窗口).width()<376){
if($touchliderTree.hasClass('slick-initialized')){
$touchlidertree.unslick();
}
$touchlidertree.slick({
自动播放:错误,
无限:是的,
速度:1500,
自适应高度:正确,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
cssEase:“线性”
});
}否则{
if($touchliderTree.hasClass('slick-initialized')){
$touchlidertree.unslick();
}
}
}
//标志旋转木马
函数touchlidertwo(){
var$touchliderWO=$('.touchlider_-two');
如果($(窗口).width()<376){
if($touchlidertwo.hasClass('slick-initialized')){
$touchlidertwo.unslick();
}
$touchlidertwo.slick({
自动播放:对,
无限:是的,
速度:1500,
自动播放速度:6000,
点:错,
幻灯片放映:1,
幻灯片滚动:1,
cssEase:“线性”
});
}否则{
if($touchlidertwo.hasClass('slick-initialized')){
$touchlidertwo.unslick();
}
$touchlidertwo.slick({
自动播放:对,
无限:是的,
速度:1500,
自动播放速度:6000,
点:错,
幻灯片放映:5,
幻灯片滚动:5,
cssEase:“线性”
});
}
}
试试这个:
$('.your-slider').slick('unslick');
不管出于什么原因,这对我有效,而“$element.unslick()”则不行