I'm trying to create a slideshow that shows 4 images at a time, and then you can click arrows on the left and right to go to the next set of images. When I attempt to open my html file in google chrome, all the images stack on top of each other vertically instead of horizontally and my arrows don't show up. I'm not sure why this is. I tried looking up and testing other examples of sliders but they all do the same thing where the images stack up on top of each other vertically and none of the arrows show up.
My page has a background image and also must have a size of 1920px 1100px. I'm not sure if this is what might be affecting it. I would appreciate some help in getting this to work.
[CODE lang="html" title="homepage.html"] <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homepage.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>[/CODE]
[CODE lang="css" title="homepage.css"] html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 1920px 1100px;
margin: 0;
overflow: visible;
}
img {
z-index: 15;
width: 100%;
height: auto;
padding: 5px;
}
.slick-dots {
z-index: 15;
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display:inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color:black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color:#999;
border:none;
width: 15px;
height: 15px;
border-radius:50%;
}
:hover{
background-color: black;
}
}
}
/* Custom Arrow */
.prev{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
.next{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
@media screen and (max-width: 800px) {
.next {
display: none !important;
}
}[/CODE]
[CODE lang="javascript" title="homepage.js"] $('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});[/CODE]
I want the slideshow to look something like this where the images are laid out horizontally instead of veritcally:
My page has a background image and also must have a size of 1920px 1100px. I'm not sure if this is what might be affecting it. I would appreciate some help in getting this to work.
[CODE lang="html" title="homepage.html"] <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homepage.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
<div>
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<script src="homepage.js"></script>
</body>
</html>[/CODE]
[CODE lang="css" title="homepage.css"] html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 1920px 1100px;
margin: 0;
overflow: visible;
}
img {
z-index: 15;
width: 100%;
height: auto;
padding: 5px;
}
.slick-dots {
z-index: 15;
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display:inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color:black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color:#999;
border:none;
width: 15px;
height: 15px;
border-radius:50%;
}
:hover{
background-color: black;
}
}
}
/* Custom Arrow */
.prev{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
.next{
z-index: 15;
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover{
cursor: pointer;
color: black;
}
}
@media screen and (max-width: 800px) {
.next {
display: none !important;
}
}[/CODE]
[CODE lang="javascript" title="homepage.js"] $('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});[/CODE]
I want the slideshow to look something like this where the images are laid out horizontally instead of veritcally:
