光滑的幻灯片旋转木马cdn没有加载。控制台日志中未显示任何错误。 [英] Slick slide carousel cdn not loading. No error is show in console log.
问题描述
我的计划是在一个滑块中放置多个滑块图像，然后手动按箭头按钮继续下一组图像。我已经研究并收集了我认为正确的代码，以创建一次显示多个图像的幻灯片。我的目标是一次显示4张图像，然后在按下箭头按钮时转到下面的4张图像。
以下是我的代码。我之前使用过其他鲜为人知的滑块旋转木马cdns，但需要许可证才能使用光滑的。当我检查控制台日志时没有显示错误，所以我不能完全确定我还在做错什么。这个光滑的轮播位于我的目标网页的一部分。可能是问题出现了，因为使用我的其他JavaScript代码无法正确加载光滑，所以我在JavaScript部分中发布了所有内容。任何帮助，将不胜感激。我附上了一张图片，以显示我想要的结果。
我尝试了什么：
My plan was to have multiple slider images within one slider and to manually press the arrow buttons to proceed to the next group of images. I have researched and gathered what I have thought to be the correct code to create a slideshow with multiple images showing at one time. I was aiming to have 4 images show at a time and then go to the next 4 images when the arrow button was pressed.
Below is my code. I had previously used other less known slider carousel cdns but a license was needed so I used slick. When I check the console log there are no errors showing so I'm not completely sure just what I am still doing wrong. This slick carousel is in a section of my landing page. Possibly the problem is occurring because slick can not load properly with my other JavaScript code, so I have posted everything in my JavaScript section. Any help would be appreciated. I have attached a image as well to show what my desired outcome would look like.
What I have tried:
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="safari-styles.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/>
<div class="slick-slider">
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\kenya2.jpg" alt="photo1">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari6.jpg" alt="photo2">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari5.jpg" alt="photo3">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari002.jpg" alt="photo4">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari13.jpg" alt="photo5">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari21.jpg" alt="photo6">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari9.jpg" alt="photo7">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\tanzania2.jpg" alt="photo8">
</div>
<div><img src="C:\Users\brand\OneDrive\Desktop\Images\safari11.jpg" alt="photo9">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="safari.js"></script>
</body>
</html>
<pre>
.slick-slider {
width: 90%;
margin: 0 auto;
display: inline-block;
box-sizing: border-box;
}
.slick-slider div {
margin-bottom: 5px;
display: inline-block;
float: left;
}
.slick-slider img {
width: 200px;
height: 200px;
display: inline-block;
cursor: pointer;
margin-right: 5px;
border: 1px solid #fff;
}
.slick-slide {
margin: 10px;
}
.slick-prev, .slick-next {
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 0;
font-size: 0;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
margin: 10px;
padding: 0;
border: none;
outline: none;
}
.slick-prev:before, .slick-next:before {
font-family:"slick";
font-size: 30px;
line-height: 1
color: black;
opacity: 0.85;
}
.slick-prev {
left: -25px;
right: auto;
}
.slick-prev:before {
content: '\2190';
}
.slick-next {
right: 25px;
left: auto;
}
.slick-next:before {
content: '\2192';
}
<pre>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000);
}
var modal = document.getElementsByClassName('modal');
var btn = document.getElementsByClassName("btn");
var span = document.getElementsByClassName("close");
btn[0].onclick = function() {
modal[0].style.display = "block";
}
btn[1].onclick = function() {
modal[1].style.display = "block";
}
btn[2].onclick = function() {
modal[2].style.display = "block";
}
span[0].onclick = function() {
modal[0].style.display = "none";
}
span[1].onclick = function() {
modal[1].style.display = "none";
}
span[2].onclick = function() {
modal[2].style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal[0]) {
modal[0].style.display = "none";
}
if (event.target == modal[1]) {
modal[1].style.display = "none";
}
if (event.target == modal[2]) {
modal[2].style.display = "none";
}
}
function openNav() {
var x = document.getElementById("mySidenav");
var y = document.getElementsByTagName("body")[0].style.marginRight = "250px";
if (x.style.width == '250px')
{
x.style.width = '0px';
}
else {
x.style.width = '250px';
}
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementsByTagName("body")[0].style.marginRight = "0";
}
$(document).ready(function(){
$('slick-slider').slick({
arrows: true,
autoplay: false,
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
speed: 300,<code><pre>
prevArrow：$（'。prev'），
nextArrow：$（'。next'），
}）;
}） ;
prevArrow: $('.prev'),
nextArrow: $('.next'),
});
});
推荐答案
（ document ）。ready（ function （）{
(document).ready(function(){
（' slick-slider'）。光滑（{
箭头：< span class =code-keyword> true ，
autoplay： false ，
slidesToShow： 4 ，
slidesToScroll： 4 ，
无限： true ，
speed： 300 ，< code>< pre>
('slick-slider').slick({ arrows: true, autoplay: false, slidesToShow: 4, slidesToScroll: 4, infinite: true, speed: 300,<code><pre>
prevArrow：
prevArrow:
（'。prev'），
nextArrow：
('.prev'),
nextArrow:
这篇关于光滑的幻灯片旋转木马cdn没有加载。控制台日志中未显示任何错误。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
