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'),
});
});
Submit an article or tip