如何解决2个光滑轮播初始化方法的问题
我正在使用slick.js在同一页面上使用2个滑块的页面。第一个滑块是页面的主要顶部横幅,第二个滑块是一个弹出窗口,用于显示产品图像和其余信息。此外,即时通讯使用.NET CORE MVC,因此我决定对弹出式产品详细信息使用局部视图。所以。问题是第二个滑块无法正常工作。
Uncaught TypeError: Cannot read property 'add' of null
at Object.e.initADA (<anonymous>:1:19335)
at Object.e.init (<anonymous>:1:19101)
at new <anonymous> (<anonymous>:1:2832)
at r.fn.init.i.fn.slick (<anonymous>:1:42781)
at HTMLdivelement.<anonymous> (<anonymous>:43:23)
at Function.each (<anonymous>:2:2715)
at r.fn.init.each (<anonymous>:2:1003)
at <anonymous>:9:27
at <anonymous>:170:3
at p (jquery-3.2.1.min.js:2)
布局
<html lang="en">
<head>
<link rel="icon" type="image/png" href="~/images/icons/favicon.png" />
<link rel="stylesheet" type="text/css" href="/lib/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/lib/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--Other css links-->
<link rel="stylesheet" type="text/css" href="/lib/vendor/slick/slick.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- Header -->
<header class="header-v3">
<!-- logo store-->
</header>
<!-- Sidebar -->
<!-- Right menu -->
@RenderBody();
<!-- Modal Details-->
<div id="divModalDetails">
</div>
<!-- Footer -->
<!--Other js libraries-->
<script src="/lib/vendor/slick/slick.min.js"></script>
<script src="js/slick-custom.js"></script>
<!--other scripts-->
<script src="js/main.js"></script>
@RenderSection("Scripts",required: false)
</body>
</html>
索引
@model Website.Models.Indexviewmodel
@{
ViewData["Title"] = "Home Page";
}
<!-- Slider -->
<<section class="section-slide">
<div class="wrap-slick1 rs2-slick1">
<div class="slick1">
<div class="item-slick1 bg-overlay1" style="background-image: url(images/slide-05.jpg);" data-thumb="images/thumb-01.jpg" data-caption="Women’s Wear">
<div class="container h-full">
<div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
<div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
<span class="ltext-202 txt-center cl0 respon2">Women Collection 2021</span>
</div>
<div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
<h2 class="ltext-104 txt-center cl0 p-t-22 p-b-40 respon1">New arrivals</h2>
</div>
<div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
<a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-slick1-dots p-lr-10"></div>
</div>
</section>
<!-- Products -->
<section class="bg0 p-t-23 p-b-130">
<div class="container">
<div class="p-b-10">
<h3 class="ltext-103 cl5">
Product List
</h3>
</div>
<!--List of products with a button in each one to display pop-up details-->
<!--example of "Quick View" button-->
<a href="#" onclick="showDetailsModal(@item.id,event)" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</a>
</div>
</section>
@Html.Hidden("urlDetails",Url.Action("Details","Home"))
模式弹出窗口
@model Website.Models.ProductoView
@{
Layout = null;
}
<div class="wrap-modal1 js-modal1 p-t-60 p-b-20">
<div class="overlay-modal1 js-hide-modal1"></div>
<div class="container">
<div class="bg0 p-t-60 p-b-30 p-lr-15-lg how-pos3-parent">
<button class="how-pos3 hov3 trans-04 js-hide-modal1">
<img src="images/icons/icon-close.png" alt="CLOSE">
</button>
<div class="row">
<div class="col-md-6 col-lg-7 p-b-30">
<div class="p-l-25 p-r-30 p-lr-0-lg">
<div class="wrap-slick3 flex-sb flex-w">
<div class="wrap-slick3-dots"></div>
<div class="wrap-slick3-arrows flex-sb-m flex-w"></div>
<div class="slick3 gallery-lb">
@{
for (int i = 0; i < Model.images.Count(); i++)
{
<div class="item-slick3" data-thumb="@Url.Content(Model.images[i])">
<div class="wrap-pic-w pos-relative">
<img src="@Url.Content(Model.images[i])" alt="IMG-PRODUCT">
<a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="@Url.Content(Model.images[i])">
<i class="fa fa-expand"></i>
</a>
</div>
</div>
}
}
</div>
</div>
</div>
<!--Rest of the product info-->
</div>
</div>
</div>
</div>
</div>
<script src="/lib/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="/lib/vendor/slick/slick.min.js"></script>
<script src="js/slick-custom.js"></script>
<script>
$('.gallery-lb').each(function () { // the containers for all galleries
$(this).magnificPopup({
delegate: 'a',// the selector for gallery item
type: 'image',gallery: {
enabled: true
},mainClass: 'mfp-fade'
});
});
</script>
<script src="js/main.js"></script>
js滑动控件
(function ($) {
// USE STRICT
"use strict";
/*==================================================================
[ Slick1 ]*/
$('.wrap-slick1').each(function(){
var wrapSlick1 = $(this);
var slick1 = $(this).find('.slick1');
var itemSlick1 = $(slick1).find('.item-slick1');
var layerSlick1 = $(slick1).find('.layer-slick1');
var actionSlick1 = [];
$(slick1).on('init',function(){
var layerCurrentItem = $(itemSlick1[0]).find('.layer-slick1');
for(var i=0; i<actionSlick1.length; i++) {
clearTimeout(actionSlick1[i]);
}
$(layerSlick1).each(function(){
$(this).removeClass($(this).data('appear') + ' visible-true');
});
for(var i=0; i<layerCurrentItem.length; i++) {
actionSlick1[i] = setTimeout(function(index) {
$(layerCurrentItem[index]).addClass($(layerCurrentItem[index]).data('appear') + ' visible-true');
},$(layerCurrentItem[i]).data('delay'),i);
}
});
var showDot = false;
if($(wrapSlick1).find('.wrap-slick1-dots').length > 0) {
showDot = true;
}
$(slick1).slick({
pauSEOnFocus: false,pauSEOnHover: false,slidesToShow: 1,slidesToScroll: 1,fade: true,speed: 1000,infinite: true,autoplay: true,autoplaySpeed: 6000,arrows: true,appendArrows: $(wrapSlick1),prevArrow:'<button class="arrow-slick1 prev-slick1"><i class="zmdi zmdi-caret-left"></i></button>',nextArrow:'<button class="arrow-slick1 next-slick1"><i class="zmdi zmdi-caret-right"></i></button>',dots: showDot,appendDots: $(wrapSlick1).find('.wrap-slick1-dots'),dotsClass:'slick1-dots',customPaging: function(slick,index) {
var linkThumb = $(slick.$slides[index]).data('thumb');
var caption = $(slick.$slides[index]).data('caption');
return '<img src="' + linkThumb + '">' +
'<span class="caption-dots-slick1">' + caption + '</span>';
},});
$(slick1).on('afterChange',function(event,slick,currentSlide){
var layerCurrentItem = $(itemSlick1[currentSlide]).find('.layer-slick1');
for(var i=0; i<actionSlick1.length; i++) {
clearTimeout(actionSlick1[i]);
}
$(layerSlick1).each(function(){
$(this).removeClass($(this).data('appear') + ' visible-true');
});
for(var i=0; i<layerCurrentItem.length; i++) {
actionSlick1[i] = setTimeout(function(index) {
$(layerCurrentItem[index]).addClass($(layerCurrentItem[index]).data('appear') + ' visible-true');
},i);
}
});
});
/*==================================================================
[ Slick3 ]*/
$('.wrap-slick3').each(function () {
$(this).find('.slick3').not('.slick3-initialized').slick({
slidesToShow: 1,autoplay: false,appendArrows: $(this).find('.wrap-slick3-arrows'),prevArrow:'<button class="arrow-slick3 prev-slick3"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',nextArrow:'<button class="arrow-slick3 next-slick3"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',dots: true,appendDots: $(this).find('.wrap-slick3-dots'),dotsClass:'slick3-dots',index) {
var portrait = $(slick.$slides[index]).data('thumb');
return '<img src=" ' + portrait + ' "/><div class="slick3-dot-overlay"></div>';
},});
});
})(jQuery);
据我所读,问题是因为滑块容器被初始化两次,所以我尝试使用$(this..find('。slick3')。not('。slick3-initialized')但不起作用。
很抱歉,这个问题很长,但我认为这是必要的。
解决方法
这里是一个演示如何在模式中使用幻灯片的演示(模式是从局部视图中看到的):
ProductoView:
public class ProductoView
{
public List<string> images { get; set; }
}
控制器:
public class TestSlickController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult TestPartialView()
{
ProductoView p = new ProductoView();
p.images = new List<string> { "~/images/green.PNG","~/images/red.PNG","~/images/yellow.PNG" };
return PartialView("Partial",p);
}
}
索引:
<h1>Index</h1>
<div class="slickdemo1">
<div class="holder">your content1</div>
<div class="holder">your content2</div>
<div class="holder">your content3</div>
</div>
<div id="testmodal" style="width:500px">
</div>
<button onclick="showDetailsModal()">click</button>
@section scripts{
<script>
$(function () {
$('.slickdemo1').slick({
infinite: true,arrows: true
});
})
function showDetailsModal() {
//using get to display the modal in the parent view div
$.get("/TestSlick/TestPartialView",function (data) {
$('#testmodal').html(data);
$('#exampleModalCenter').modal('show');
$('.slickdemo').slick({
infinite: true,slidesToShow: 1,slidesToScroll: 1
});
$('#btnClose').on('click',function () {
$('#exampleModalCenter').modal('toggle');
});
})
}
</script>
}
<style>
.holder {
height: 150px;
background: gray;
border: 1px dashed #000;
color: #fff;
text-align: center;
}
</style>
部分:
<div class="modal fade" id="exampleModalCenter" role="dialog">
<div class="container">
<div class="row">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4>Show</h4>
</div>
<div class="modal-body" style="width:500px">
Here is a slick
<div class="slickdemo">
@for (int i = 0; i < Model.images.Count(); i++)
{
<div class="holder"><img src="@Url.Content(Model.images[i])"></div>
}
</div>
</div>
<div class="modal-footer">
<button id="btnClose">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。