BrandonC84 Ответов: 0

Slick slide carousel cdn не загружается. В журнале консоли ошибка не отображается.

Мой план состоял в том, чтобы иметь несколько изображений слайдера внутри одного слайдера и вручную нажимать кнопки со стрелками, чтобы перейти к следующей группе изображений. Я исследовал и собрал то, что я считал правильным кодом для создания слайд-шоу с несколькими изображениями, показываемыми одновременно. Я стремился показать 4 изображения одновременно, а затем перейти к следующим 4 изображениям, когда была нажата кнопка со стрелкой.

Ниже приведен мой код. Раньше я использовал другие менее известные CDN slider carousel, но мне нужна была лицензия, поэтому я использовал slick. Когда я проверяю журнал консоли, там нет никаких ошибок, поэтому я не совсем уверен, что именно я все еще делаю неправильно. Эта скользкая карусель находится в разделе моей целевой страницы. Возможно, проблема возникает из-за того, что slick не может правильно загрузиться с моим другим кодом JavaScript, поэтому я разместил все в своем разделе JavaScript. Любая помощь будет оценена по достоинству. Я также приложил изображение, чтобы показать, как будет выглядеть мой желаемый результат.

Что я уже пробовал:

<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'),
});
});

0 Ответов