Javascript 2滑动转盘初始化方法的问题
我正在使用slick.js在同一页面上使用两个滑块。第一个滑块是页面的主要顶部横幅，第二个滑块是一个弹出窗口，用于显示产品图像和其他信息。另外，我正在使用.NET核心MVC，所以我决定使用部分视图来显示弹出的产品详细信息。所以问题是第二个滑块不能正常工作Javascript 2滑动转盘初始化方法的问题,javascript,jquery,asp.net-mvc,asp.net-core-mvc,slick.js,Javascript,Jquery,Asp.net Mvc,Asp.net Core Mvc,Slick.js,我正在使用slick.js在同一页面上使用两个滑块。第一个滑块是页面的主要顶部横幅，第二个滑块是一个弹出窗口，用于显示产品图像和其他信息。另外，我正在使用.NET核心MVC，所以我决定使用部分视图来显示弹出的产品详细信息。所以问题是第二个滑块不能正常工作 Uncaught TypeError: Cannot read property 'add' of null at Object.e.initADA (<anonymous>:1:19335) at Object.e
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)
Uncaught TypeError:无法读取null的属性“add”
在Object.e.initADA(
产品清单
@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>
@model.Website.Models.ProductoView
@{
布局=空；
}
@{
对于（int i=0；i(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');
},$(layerCurrentItem[i]).data('delay'),i);
}
});
});
/*==================================================================
[ Slick3 ]*/
$('.wrap-slick3').each(function () {
$(this).find('.slick3').not('.slick3-initialized').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
infinite: true,
autoplay: false,
autoplaySpeed: 6000,
arrows: true,
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',
customPaging: function(slick, index) {
var portrait = $(slick.$slides[index]).data('thumb');
return '<img src=" ' + portrait + ' "/><div class="slick3-dot-overlay"></div>';
},
});
});
})(jQuery);
（函数（$）{
//严格使用
“严格使用”；
/*==================================================================
[1]*/
$（'.wrap-1'）。每个（函数（）{
var wrapSlick1=$（此值）；
var slick1=$（this.find（'.slick1'）；
var itemsick1=$（slick1.find（'.item-slick1'）；
var layerSlick1=$（slick1.find（'.layer-slick1'）；
var=1=[]；
$（slick1.on（'init'，function（））{
var layerCurrentItem=$（itemSlick1[0]）。查找（'.layer-slick1'）；
对于（var i=0；i，这里有一个演示，演示如何在模式中使用幻灯片（模式来自部分视图）：
产品视图：
public class ProductoView
{
public List<string> images { get; set; }
}
公共类产品视图
{
公共列表图像{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);
}
}
公共类TestSlickController:控制器
{
公共IActionResult索引（）
{
返回视图（）；
}
公共IActionResult TestPartialView（）
{
ProductoView p=新的ProductoView（）；
p、 images=新列表{“~/images/green.PNG”、“~/images/red.PNG”、“~/images/yellow.PNG”}；
返回部分视图（“部分”，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>
索引
你的内容1
你的内容2
你的内容3
点击
@节脚本{
$（函数（）{
$（'.slickdemo1'）。光滑({
无限：是的，
箭头：对
});
})
函数showDetailsModal（）{
//使用get在父视图div中显示模式
$.get（“/TestSlick/TestPartialView”，函数（数据）{
$（'#testmodal'）.html（数据）；
$（'exampleModalCenter'）.modal（'show'）；
$（'.slickdemo'）。光滑({
无限：是的，
幻灯片放映：1，
幻灯片滚动：1
});
$（'#btnClose'）。在（'click'，函数（）{
$（'exampleModalCenter'）.modal（'toggle'）；
});
})
}
}
.持有人{
高度：150像素；
背景：灰色；
边框：1px虚线#000；
颜色：#fff；
文本对齐：居中；
}
部分：
<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>
显示
这是一张光滑的支票
@对于（int i=0；i
结果:
<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>