Hi im using visual studio 2017 and i have an html based site. I want use slick slider that already working on codepen but when i put in visual studio the javascript doesnt work please help me!
console.clear();
$(".slider").slick({
autoplay: true,
slidesToShow: 4,
dots: false,
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
Take a look if you added the library at the head tag in your code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Also, be sure you load it before your script. In codepen you can add the library in the settings, so maybe you forgot to load it in your code in VS. If that doesn't solve your problem, it would be nice if you take a look at your console error... So we can know the problem and help you better.
My libraries is:
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="css/home.css" rel="stylesheet" /> <script src="js/carousel.js"></script> <script src="js/test.js"></script>
As you can see in first photo i have already put into a test.js that include all javascrpit code tha im calling into my aspx
My css file:
#dealss .slick-slider { font-size: 30px; line-height: 1; text-align: center; color: white;
} .slick-slide { background: rgba(255,255,255,.4); padding: 40px 0;
#dealss .slick-slider { font-size: 30px; line-height: 1; text-align: center; color: white;
} .slick-slide { background: rgba(255,255,255,.4); padding: 40px 0;
#dealss .slick-slider { font-size: 30px; line-height: 1; text-align: center; color: white;
} .slick-slide { background: rgba(255,255,255,.4); padding: 40px 0;
}
And my result is : Result
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.